Remove div and its content from html string

Question

Lets say i have a string like this:

<div id="div1"></div>
<div class="aClass" id="div2">  
   <div id="div3" class="anotherClass"></div>
   <div id="div4" />
</div>
<div id="div5"></div>

I want to remove div2 from the string and everything inside that div

So i got a string like this

<div id="div1"></div>
<div id="div5"></div>

I thinking something like using regex to find the first div with the id of "div2" or whatever the id of the div is and count brackets untill it gets to "< /div>". The problem is that the "div3" also got a "< /div>" at the end.

The content of the div i want to remove may contain more or less div's then this too.

Any ideas on how to code this?

Update:

                var htmlText = editor3.getValue();
            var jHtmlObject = jQuery(htmlText);
            jHtmlObject.find("#div2").remove();
            var newHtml = jHtmlObject.html();
            console.log(newHtml);

Why doesn't this return anything in the console?

Update2!: I have made a jsFiddle to make my problem visual.. http://jsfiddle.net/WGXHS/

You dont need to struggle so much to accomplish this :) just use `.remove()` functionality from jquery. — dreamweiver, Jun 05 '13 at 12:46
Parsing HTML with Regex will [make you go insane](http://stackoverflow.com/a/1732454/2430028). [You could use `DOMParser`](http://stackoverflow.com/a/3104237/2430028) and remove the div from there. — user2000008, Jun 05 '13 at 12:47
Jquery was developed was this sake itself. **Write Less, Do More**. when your using jquery ,make the most of it — dreamweiver, Jun 05 '13 at 12:47

Patrick Evans · Accepted Answer · 2013-06-05T14:58:52.070

15

Just put the string into jQuery and use find and then remove.

var htmlString = '<div id="div1"></div>\
<div class="aClass" id="div2">\ 
   <div id="div3" class="anotherClass"></div>\
   <div id="div4" />\
</div>\
<div id="div5"></div>';

var jHtmlObject = jQuery(htmlString);
var editor = jQuery("<p>").append(jHtmlObject);
editor.find("#div2").remove();
var newHtml = editor.html();

edited Jun 05 '13 at 14:58

answered Jun 05 '13 at 12:46

Patrick Evans

41,991
6
74
87

var htmlText = editor3.getValue(); var jHtmlObject = jQuery(htmlText); var newHtml = jHtmlObject.find("#div1").remove(); console.log(newHtml); Got this error: Uncaught Error: Syntax error, unrecognized expression:
– Koiski Jun 05 '13 at 13:03
remove doesnt return the new string, you have to do `jHtmlObject.html();` to get the html. – Patrick Evans Jun 05 '13 at 13:05
So how do i put that in a string? var newHtml = jHtmlObject.html(); Gave me the same error.. – Koiski Jun 05 '13 at 13:08
make sure that there is a beginning tag at the very beginning of the string, no spaces or words or etc it has to be a tag element, otherwise jquery wont see it as html. – Patrick Evans Jun 05 '13 at 13:11
Ok no errors when i removed the spaces but console.log(newHtml) didn't return anything.. – Koiski Jun 05 '13 at 13:15
1

http://jsfiddle.net/WGXHS/4/ forgot you have to add the code to a parent item first to get the correct functionality. – Patrick Evans Jun 05 '13 at 14:56

score 2 · Answer 2 · answered Jun 05 '13 at 12:47

2

If you have access to jQuery and your HTML is part of the DOM you can use $.remove()

EG. $('#div2').remove();

If it's not part of the DOM, and you have it in a string, you can do something like:

$('#div2', $(myHTML)).remove();

answered Jun 05 '13 at 12:47

itsmejodie

4,148
1
18
20

Jude Duran · Answer 3 · 2013-06-05T12:57:18.663

1

jQuery .remove() will do

$("#div2").remove();

edited Jun 05 '13 at 12:57

answered Jun 05 '13 at 12:46

Jude Duran

2,195
2
25
41

score 0 · Answer 4 · answered Jun 05 '13 at 12:48

The regex option would work if you control generating the string so you can ensure things like order of the attributes and indentation. If not your best bet is to use an HTML parser. If you are working inside of a browser jQuery is a good option. If you are working server-side you'll need to find a parser for the language you chose.

Remove div and its content from html string

4 Answers4

Linked