In jQuery I want to remove all HTML inside of a div
JqueryJquery Problem Overview
I have a div and I want to remove all the HTML inside of that div.
How can I do this?
Jquery Solutions
Solution 1 - Jquery
You want to use the empty function:
$('#mydiv').empty();
Solution 2 - Jquery
I don't think empty()
or html()
is what you are looking for. I guess you're looking for something like strip_tags
in PHP. If you want to do this, than you need to add this function:
jQuery.fn.stripTags = function() {
return this.replaceWith( this.html().replace(/<\/?[^>]+>/gi, '') );
};
Suppose this is your HTML:
<div id='foo'>This is <b>bold</b> and this is <i>italic</i>.</div>
And then you do:
$("#foo").stripTags();
Which will result in:
<div id='foo'>This is bold and this is italic.</div>
Solution 3 - Jquery
Another way is just to set the html to the empty string:
$('#mydiv').html('');
Solution 4 - Jquery
var htmlJ = $('<p><span>Test123</span><br /><a href="http://www.google.com">goto Google</a></p>');
console.log(htmlJ.text()); // "Test123goto Google"
Solution 5 - Jquery
function stripsTags(text)
{
return $.trim($('<div>').html(text).text());
}
Solution 6 - Jquery
suppose you have a html like this
<div class="prtDiv">
<div class="first">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
</div>
if you want all html under "first" div to remove permanently. just use this
$('.first').empty();
result will be like this
<div class="prtDiv">
<div class="first">
</div>
</div>
for temporary(if you want to add them again) we can try detach() like
$('.first').detach();