点击按钮后删除DIV

Question

我想删除添加的DIV's（class stripe），然后仅将它应用于可见的DIVs但我卡住了。似乎我不明白脚本如何处理。任何帮助表示赞赏！

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'); 
    }); 
}); 

Answer 1

试试这个。我简化了你的代码。

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 

工作例如：https://jsfiddle.net/DinoMyte/c98rxbju/29/

Answer 2

相反的fadeIn and fadeOut，使用show and hide with time delays，那么你会得到规定的输出。

---

$('.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>

检查这方面的工作小提琴：here