CODEWITHSUNDEEP
javascriptjquery
Saurab
Saurab

Reputation: 2051

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.

Upvotes: 0

Views: 160

Answers (3)

Beginner
Beginner

Reputation: 4153

you just forgot to wrap the inside of your setTimeout in a function

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

Upvotes: 0

hunter2009
hunter2009

Reputation: 153

Try like this:

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

Hope it work! By the way, can you provide the error message in console?

Upvotes: 0

Justinas
Justinas

Reputation: 43507

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

Upvotes: 4

Related Questions