In jQuery I want to remove all HTML inside of a div

Question

I have a div and I want to remove all the HTML inside of that div.

How can I do this?

Answer 1

Another way is just to set the html to the empty string:

$('#mydiv').html('');

Answer 2

var htmlJ = $('<p><span>Test123</span><br /><a href="http://www.google.com">goto Google</a></p>');
console.log(htmlJ.text()); // "Test123goto Google"

Answer 3

  function stripsTags(text)
  {
    return $.trim($('<div>').html(text).text());
  }

Answer 4

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>

Answer 5

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

Answer 6

You want to use the empty function:

$('#mydiv').empty();