.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

Pero el resultado debería ser 12 porque solo dos de slidercard son display:none.

Además, en la pantalla veo: todos .slidecard se eliminan, en lugar de solo dos.

2
qadenza 28 feb. 2018 a las 11:14

3 respuestas

La mejor respuesta

El problema con su código es que mientras está iterando con cada método de jQuery, está eliminando los elementos de la sildecard. Con cada iteración, los siguientes elementos son primero y segundo, y, por lo tanto, están ocultos por su CSS. El primer elemento siempre estará oculto y, por lo tanto, se eliminará, lo que hará que todos los elementos se eliminen. Un mejor enfoque usando el selector de jQuery sería:

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

O para mantener su flujo lógico, una alternativa podría ser:

var hiddenArr = [];
$('.slidercard').each(function(){
    if ($(this).css("display") == "none") {
        hiddenArr.push($(this));
    }
});
hiddenArr.forEach((element) => {element.remove();});
4
Alon Gadot 28 feb. 2018 a las 08:51

Como @AlonGadot mencionó, el problema con su código es que mientras está iterando con cada método de jQuery, está eliminando el elemento sildecard.

Entonces, le doy una respuesta alternativa, puede ocultar los elementos a través de jquery con el método eq(), por lo que puede reducir mucho el código que, de lo contrario, es un script más largo para eliminar elementos ocultos:

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>
0
SilverSurfer 28 feb. 2018 a las 09:05

Probar esto

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

Cada uno transmitirá el elemento infantil que está oculto

0
lior 28 feb. 2018 a las 10:51