Question

Why doesn’t the following remove the div with class hidden?

var data = 'This is a message <div class="hidden"> <ul id="canceledOrders"> <li>502301</li> </ul> </div>';
$(data).find(".hidden").remove();

After running the above, data‘s value remains the same. Is the div not removed because data is not in the DOM?

Answer 1

You removed the element from the DOM tree created by $().
That doesn’t affect the string it was parsed from.

You need to get the HTML source of the newly modified DOM tree:

var data = ...;
var tree = $("<div>" + data + "</div>");

tree.find('.hidden')
    .remove();

data = tree.html();

See my blog for a more detailed explanation.