Need to remove all the code from the start tag to the next

I've tried this

$('#page1').remove();

But that only removes what's between the tag.

And I don't know what else could be between the page1 and page2 tags as the code is dynamically added based on the types of form elements on the page

<div id='page1' name='page1'>
 ...
</div> 
<div id='another element' />
<div id=yet 'another element' />
...
<!-- Need to remove from page1 to here -->
<div id='page2' name='page2'>
 ...
</div>

Need to remove all the code from the start tag to the next

I've tried this

$('#page1').remove();

But that only removes what's between the tag.

And I don't know what else could be between the page1 and page2 tags as the code is dynamically added based on the types of form elements on the page

<div id='page1' name='page1'>
 ...
</div> 
<div id='another element' />
<div id=yet 'another element' />
...
<!-- Need to remove from page1 to here -->
<div id='page2' name='page2'>
 ...
</div>

• javascript
• jquery

• in the above example: you want to remove page1, another element, yet another element ? – neeebzz Commented Apr 22, 2011 at 13:59

5 Answers 5

Assuming you want to remove page1 and everything until page2 you can do this:

$("#page1").nextUntil("#page2").andSelf().remove();

Example on jsfiddle

If they are nested (?) and you want to delete the children in the 'page1' div, you could do something like this maybe:

$('#page1' > div).remove();

Or, if you wanted to selectively do it - and only delete certain divs in the page 1 - you could add a class it it and do the same type of thing.

How about something like:

var last = null;
var curr = $('#page1');
while (curr.attr('id') != 'page2') {
    if (last != null) {
        last.remove();
    }
    last = curr;
    curr = curr.next();
}
if (last != null) {
    last.remove();
}

$('[id^="#another"]:not([id^="#page"])').each(function()
{
   $(this).remove();
});

Removes all the elements that start with another but excludes elements that starts with page.

When you need to transend "ID" in JQuery it is easy to use "class" instead. To each tag that might form a set of controls to be removed add class="removeSet1". Then when needed you invoke $(".revoveSet1").remove();