克隆HTML并使用jQuery删除一些节点

Question

I'm developing a little tool for live editing using Chrome DevTools, and I have a little button "Save" which grabs the HTML and sends it to server to update the static file (.html) using Ajax. Very simple indeed.

My problem is that I need to filter the HTML code before sending it to the server, I need to remove some nodes and I'm trying to achive this using jQuery, something like this:

// I grab all the HTML code
var html = $('<div>').append($('html').clone()).html();
// Now I need to remove some nodes using jQuery
$(html).find('#some-node').remove();
// Send the filtered HTML to server
$.post('url/to/server/blahblahblah');

I already tried this Using jQuery to search a string of HTML with no success. I can't achieve to use jQuery on my cloned HTML code.

Any idea about how to do this?

Answer 1

The DOM is not a string of HTML. With jQuery, you do DOM manipulation, not string manipulation.

What you're doing is

• cloning the document (unnecessary because you convert it to HTML anyway) ,

• appending that cloned document to a new div for some reason

• converting the content of that div to an HTML string

• converting that HTML back to DOM nodes $(html) (so we're back to the first point above)

• finding and removing an element in those nodes

• presumably posting the html variable to the server.

Unfortunately, the html string has not changed because you manipulated DOM nodes, not the string.

---

Hopefully you can see above that you're doing all sorts of conversions that have little to do with what you ultimately want.

I don't know wny you'd need to do this, but all you need is to do a .clone() , then the .find().remove() , then .html()

var result = $("html").clone(false);

result.find("#some-node").remove();

var html = result.html();

Answer 2

Maybe like this?

var html = $('html').clone();
html.find('#some-node').remove();