Question

How would I filter through a list of child divs and detach divs based on a specific index value.

So for example I want to be able to decide what index’s I want to detach. for example lets say I have 10 child divs inside a element called holder. I want to be able to filter through them and remove lest say this sequence
[0, 3, 5, 7]

The above sequence could change. When I filter through the divs I want to be able to detach them and later add them back again using jquery.

I looked into the filter method but not sure how to only filter the element indexes I want. Anyone got any good ideas.

<div id="holder">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 <div>10</div>
</div>

Answer 1

Here’s a solution if you want to rely on the text inside the div:

$('#holder div').each(function(){
    var filter = ['0', '3', '5', '7'];

    if($.inArray($(this).text(), filter) > -1)
    {
        $(this).detach();
    }
});

and another solution if you want to rely on the indexes:

$('#holder div').each(function(i){
    var filter = [0, 3, 5, 7];

    if($.inArray(i, filter) > -1)
    {
        $(this).detach();
    }
});