username username - 1 month ago 5
Javascript Question

javascript remove all elements :Uncaught SyntaxError: Unexpected identifier

This type of questions has been asked alot in this site, but i don't understand why this happens.
I want to write a script that removes all elements with class "not_imp_msg" and i did this

setTimeout($('.not_imp_msg').each(function(){$(this).slideDown();}),2000);


Actually this is for flash message in laravel and in my flash.blade.php

@foreach($flash as $flash_message)
@if(isset($flash_message['status']) && $flash_message['status'] != null)
<div class="box box-{{$flash_message['class']}} box-solid">
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<div class="box-body">
{{$flash_message['message']}}
</div>
</div>
@else
<div class="box box-{{$flash_message['class']}} box-solid not_imp_msg">
<div class="box-body">
{{$flash_message['message']}}
</div>
</div>
@endif

@endforeach


This gives me the error after 2 seconds but all elements slides up as soon as documents load. Should it not wait for 2 seconds. I can't understand why.

Answer

Try passing anonymous function, as setTimeout is expecting function name or anonymous function:

$(document).ready(function() {
  setTimeout(function() {
    $('.not_imp_msg').slideDown();
  }, 2000);
});
.not_imp_msg {
  background-color: #ddd;
  border-top: 1px solid white;
  height: 50px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="not_imp_msg"></div>
<div class="not_imp_msg"></div>
<div class="not_imp_msg"></div>
<div class="not_imp_msg"></div>
<div class="not_imp_msg"></div>


Side notes

If you want to remove elements, than use callback function of slideUp(callback) to .remove elements.


.slideDown will reveal elements, .slideUp will collapse elements, but they will still be presented in DOM with 0px height