Clone HTML and remove some nodes using 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?

@andymccullough, he is creating the div as a container for the html to be put in. not pulling all of the divs from the html and putting the html in them. — Smern
– Smern, Commented Feb 21, 2014 at 16:26
ah cool, didnt know that is what that done, learn something new everyday — andy mccullough
– andy mccullough, Commented Feb 21, 2014 at 16:29

cookie monster · Accepted Answer · 2014-02-21 16:32:18Z

5

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();

answered Feb 21, 2014 at 16:32

cookie monster

11k4 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nikoskip Over a year ago

You are right, you have clarified me the concept. I was very close! hahaha. Thanks a lot.

FlamesoFF · Accepted Answer · 2014-02-21 16:48:23Z

0

Maybe like this?

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

edited Feb 21, 2014 at 16:48

answered Feb 21, 2014 at 16:35

FlamesoFF

1848 bronze badges

1 Comment

cookie monster Over a year ago

Seems like you're guessing. What is being posted to the server?

Collectives™ on Stack Overflow

Clone HTML and remove some nodes using jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related