Edit results of outerHTML with jQuery

Question

I'm trying to read in the entire page's HTML (including the doctype) then remove a few parts of the page in order to pass it as a string via AJAX.

What I have so far is:

var page = doctype + document.documentElement.outerHTML;

This gives me the content that I want, but when I try to use jQuery's .remove() function, I'm getting undefined is not a function.

page.remove(".my-class");

I assume I'm doing something with the variable type wrong? How can I grab the full page source such that I can still manipulate it with jQuery?

Answer 1

You need to put the html into a jQuery object in order to manipulate it. After you do that you can use the jQuery's find method then remove method to remove elements that match .my-class:

var $page = $(doctype + document.documentElement.outerHTML);
$page.find(".my-class").remove();

After that you can get the resulting html by doing:

var htmlToSendViaAjax = $page[0].outerHTML;

Answer 2

If you want to manipulate HTML with jQuery, you have to call the jQuery constructor:

var page = $(doctype + document.documentElement.outerHTML);
page.remove(".my-class");

Answer 3

Your problem is that page is not a jQuery object and as such doesn't have methods like .remove().

If you want the outerHTML with jQuery, you need to make a jQuery selection:

$("#selector");
$(document); // for the entire document

Then you can use a solution found here to get the outerHTML of the first element in the selection (you can use a for or each loop if you do it for lots of elements:

var $selection = $("#selector")
$selection[0].outerHTML;