仅删除隐藏的类元素而不是所有元素

时间:2018-02-28 08:14:49

标签: jquery css

.slidercard:nth-of-type(1){
    display:none;
}
.slidercard:nth-of-type(2){
    display:none;
}

js

var b = $('.slidercard').length;
console.log(b);  // result: 14 - that's ok

$('.slidercard').each(function(){
     if ($(this).css("display") == "none") {
        $(this).remove();
    }
});

var b = $('.slidercard').length;
console.log(b);  // result: 0

但结果应为12,因为slidercard中只有两个是display:none

另外,在屏幕上,我看到 - 所有.slidecard都被移除,而不是只有两个。

3 个答案:

答案 0 :(得分:4)

您的代码存在的问题是,当您使用jQuery迭代每种方法时,您删除了 sildecard项目。在每次迭代中,您将生成下一个项目第1和第2个 - 因此被CSS隐藏。第一个项目将始终隐藏,因此将被删除,从而导致所有项目被删除。 使用jQuery选择器的更好方法是:

$('.slidercard:hidden').remove();

或者为了维持您的逻辑流程,可以选择:

var hiddenArr = [];
$('.slidercard').each(function(){
    if ($(this).css("display") == "none") {
        hiddenArr.push($(this));
    }
});
hiddenArr.forEach((element) => {element.remove();});

答案 1 :(得分:0)

试试这个

$('.slidercard').find(':hidden').each(function(){
    $(this).remove();
});

每个都会传递隐藏

的元素子元素

答案 2 :(得分:0)

正如@AlonGadot提到的,代码的问题在于,当您使用jQuery的每个方法进行迭代时,您将删除sildecard项。

所以我给你一个替代的答案,你可以通过jquery用eq()方法隐藏元素,这样你就可以减少很多代码,而不是那么长的脚本来删除隐藏的元素: / p>

var b = $('.slidercard').length;
console.log(b);  // result: 14 - that's ok

$(".slidercard").eq(0).hide().eq(1).hide()
$(".slidercard:hidden").remove()
    
b = $('.slidercard').length;
console.log(b);  // result: 0
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="slidercard">Paragraph 1</div>
<div class="slidercard">Paragraph 2</div>
<div class="slidercard">Paragraph 3</div>
<div class="slidercard">Paragraph 4</div>
<div class="slidercard">Paragraph 5</div>
<div class="slidercard">Paragraph 6</div>
<div class="slidercard">Paragraph 7</div>
<div class="slidercard">Paragraph 8</div>
<div class="slidercard">Paragraph 9</div>
<div class="slidercard">Paragraph 10</div>
<div class="slidercard">Paragraph 11</div>
<div class="slidercard">Paragraph 12</div>
<div class="slidercard">Paragraph 13</div>
<div class="slidercard">Paragraph 14</div>
</body>