How to remove an element's content with JQuery?

Question

Say I have a div and some content inside it.

<div>
      Content
</div>

With JQuery, how do I empty the div without removing the div, only the content inside?

Answer 1

You can use the empty function to remove all the child nodes (all its content) of an element:

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

The empty function will also remove all the event handlers and the jQuery internally cached data.

Answer 2

If the div has an id, you can do it like this:

$('#id-of-div').html('');

Or you can do all classes of .class-of-div

$('.class-of-div').html('');

Or just all divs

$('div').html('');

EDIT: But empty() (above) would work better.

Answer 3

Html

<div id='emptythis'>
   Content
</div>

Jquery

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