Question

Have found a mixed bag of solutions that don’t seem to work. I’m loading the HTML of a particular page, and want to extract the HTML from within an identified DIV – this works fine, but trying to remove an unidentified H3 tag from within the remaining HTML (and retain the following UL/LIs) seems to be impossible: I’ve tried everything Google has to offer, and can get either no results, or only the contents of the H3 tag. I’m trying to get the HTML of the UL list, including the UL tags.

/* variable html is the result of an AJAX load of the web page of interest*/
/* I know the first line below is not correct */
/* but it demonstrates the chain of events that I'm trying to accomplish*/

var theStuffIWant = $(html).find("#tab-2").remove("h3").html();

<div id="tab-2">
    <h3>Heading to get rid of</h3>
    <ul>The list I want to keep
         <li>List item to keep</li>
         <li>List item to keep</li>
         <li>List item to keep</li>
    </ul>
</div>

Answer 1

See http://jsfiddle.net/ewjBp/

The remove() can’t be used in chaining, because it returns the elements that were removed.

So you need to split: first remove the elements, then check the html() of the div, which was ridden of all h3.

---

Edit

http://jsfiddle.net/ewjBp/5/

So, first you create a new Jquery object by wrapping the html you want (e.g. $(html)).

As @pete stated, this won’t be inserted into DOM. DOM is the in-memory representation of the page, accessible to Javascript, meaning that $(html) won’t be added to the page structure representation.

Then just find the headers (with children()), and replace with nothing.

I suggest you read about replaceWith(), and the fact that it returns the old object instead. That’s why I discard return value. It’s not necessary, html will be changed anyway in the above code.

Also, html.html() discards the outer HTML element in html, which is the DIV container in this example.