CODEWITHSUNDEEP
jquery
MarSch
MarSch

Reputation: 35

Remove DIV after button click

I want to remove the added DIV's (class stripe) and then apply it only on visible DIVs but I'm stuck. It seems like I don't understand how the script is processing. Any help is appreciated!

https://jsfiddle.net/c98rxbju/

$('.item').each(function(i,e){
    if (((i+1) % 2) == 0)
        $(this).wrapAll('<div class="stripe" style="background-color: #887733;" />\n\n');
});
$(":button").click(function() {
    var selectedcolor = this.value;
    var list = $(".item");
    $(list).fadeOut("fast");
    $(list).each(function(index) {
        var color = $(this).data("color");
        if (color == selectedcolor){
            $(this).fadeIn("fast");
        }
    });
$('.stripe').contents().unwrap();
$('.item:visible').each(function(i,e){
    if (((i+1) % 2) == 0)
        $(this).wrapAll('<div class="stripe" style="background-color: #887733;" />\n\n');
    });
});

Upvotes: 0

Views: 60

Answers (2)

DinoMyte
DinoMyte

Reputation: 8858

Try this. I've simplified your code.

  function UpdateStrips(){ 
   $('.item:visible:odd').each(function(){  
        $(this).wrap('<div class="stripe"/>');  
   });
 }

$(":button").click(function() {
        var selectedcolor = this.value;
        var list = $(".item");
        $(list).fadeOut("fast");
        $(list).each(function(index) {
            if($(this).closest('div.stripe').length) 
                $(this).unwrap();  // unwrap only the elements with parent div with class stripe
              var color = $(this).data("color");
              if (color == selectedcolor)
                 $(this).fadeIn("fast",function()
                 {
                    UpdateStrips();  // invoke callback once the fadeIn completes
                 });
        });         
});

UpdateStrips(); // invoke on page load

Working example : https://jsfiddle.net/DinoMyte/c98rxbju/29/

Upvotes: 1

stark
stark

Reputation: 2256

Instead of fadeIn and fadeOut, use show and hide with time delays, then you get the prescribed output.

$('.item').each(function(i) {
  if (((i + 1) % 2) == 0)
    $(this).wrapAll('<div class="stripe" style="background-color: #887733;" />');
});
$(":button").click(function() {
  var selectedcolor = this.value;
  var list = $(".item");
  $(list).hide();
  $(list).each(function(index) {
    var color = $(this).data("color");
    if (color == selectedcolor) {
      $(this).show();
    }
  });
  $('.stripe').contents().unwrap();
  $('.item:visible').each(function(i) {
    if (((i + 1) % 2) == 0)
      $(this).wrapAll('<div class="stripe" style="background-color: #887733;" />\n\n');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="blue" type="button">Blue</button>
<button value="black" type="button">Black</button>
<button value="white" type="button">White</button>
<div id="wrapper">
  <div class="item" data-color="blue">Toyota</div>
  <div class="item" data-color="blue">Nissan</div>
  <div class="item" data-color="blue">Volvo</div>
  <div class="item" data-color="blue">Ford</div>
  <div class="item" data-color="black">Chevrolet</div>
  <div class="item" data-color="white">BMW</div>
  <div class="item" data-color="white">Mercedes</div>
  <div class="item" data-color="blue">Mercedes</div>
  <div class="item" data-color="black">Nissan</div>
  <div class="item" data-color="white">Fiat</div>
  <div class="item" data-color="white">Volvo</div>
</div>

Check this working fiddle: here

Upvotes: 0

Related Questions