How to remove an element's content with JQuery?

Question

Say I have a div and some content inside it.

      Content

With JQuery, how do I empty the div without removing the di

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

$( "div" ).remove( ".hello" );

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

reference

Answer 3

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 4

Html

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

Jquery

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