使用纯JavaScript删除指定ID属性之前的所有元素

Question

I'm using a web service to query a ticketing interface and pull back all support tickets that are open at any point in time, displaying them in a nice neat table within an iframe as part of our web application. My application is written in PL/SQL however I use this to construct my HTML pages and the content that is displayed within my iframe. My main issue is that because the tickets are made up of Email content, there is a lot of useless rubbish (mostly tags) and irrelevant text that is included at the top of the Email content which causes my interface to look trashy.

Within my code I am wrapping the main areas of content that I require in a table with an ID of "ticketsTable" and would like to remove any elements or content within the iframe only that occurs before this tickets table.

Usually I would use jQuery for this task:

$("#earliercontent").nextUntil("#ticketsTable").andSelf().remove();

however, our system is built using ExtJS so we wish to avoid any potential conflict the jQuery library could cause with this environment. I therefore need a way to process and loop through the contents of the iframe, removing all elements and text that occur before the ticketTable id therefore eradicating all of the unnecessary content.

I've already tried this:

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

Source: jQuery remove all elements until id='whatever' found

however, as the Email content is variable, there is no specific ID tag I can specify for the script to start at. Therefore, is there an alternative method I can use (without a library, just pure JavaScript) to remove all elements and content before the ticketsTable?

I must stress that the contents of the ticketsTable must remain intact. It is only the content that occur before this within the body that I wish to remove.

Answer 1

http://jsfiddle.net/yJrb7/

var parent = document.getElementById("parent");
var stopID = "stop";
var length = parent.childNodes.length, j = 0;
for(var i=0; i < length; i++){
    if(parent.childNodes[j].id != stopID){
        parent.removeChild(parent.childNodes[j]);
    }
    else{
        j++;
    }
}

When you remove a child node, the array is shifted, so if for example you need to remove two first nodes, then you would call removeChild for index 0 two times.