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.