How to remove the first level elements in hierarchy ?

Question

Hi guys,

I have a datalist being generated with ASP, but unfortunately the jQuery script that I'm using to scroll through the results requires the layout to be as so:

<div class="itemContainer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

ASP generates something that looks like this:

<div class="itemContainer">
<div class="item"><span></span><br /></div>
<span></span>
<br />
<div class="item"><span></span><br /></div>
<span></span>
<br />
<div class="item"><span></span><br /></div>
<span></span>
<br />
</div>

The problem is that the divs also contain span and br elements, so simply looking for those elements and using the .remove() method doesn't work. I need to delete all the span and br elements, but only the ones that are direct ancestors of the 'itemContainer' div. I hope that is clear, any help would be much appreciated. Alternatively if there is a way to get ASP to generate a datalist with only divs, that would also be helpful. Thanks!

Answer 1

This should work:

var e = $("div.itemContainer div.item:first");
e.next().remove(); // remove span
e.next().remove(); // remove br
e.remove(); // remove the div

Completely untested, you cat may get boiled while testing this code. Use with caution.

Answer 2

This will work.

$(document).ready(function() {
    $(".itemContainer").find(">span, >br").remove();
});

But as my comment above, you likely don't need to remove these elements first.

Answer 3

You can traverse from <div class="item"> to the next <div class="item"> with something like

// move from first div with class "item" to second
$("div.item:first").nextAll("div.item");

But if you really need to remove the immediate <span> and <br> then

$("div.itemContainer > span, div.itemContainer > br").remove();

or

$("div.itemContainer").children("span,br").remove();

will remove only immediate <span> and <br> children of <div class="itemContainer">