[jquery] Remove innerHTML from div

I'm trying to clear the div's innerHTML before repopulating it. I tried removeData() but once that's called, when I try to add the data, I get nothing from the next line after remove whereas if I remove the removeData() it's fine again. I just want to clear out any previous content in that div before I re-populate it.

    divToUpdate.removeData(); //clean out any existing innerHTML div content first
    divToUpdate.html(data);

It looks like it never gets to my divToUpdate.html(data) for some reason after it calls that removeData();

This question is related to jquery innerhtml

The answer is


To remove all child elements from your div:

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

.removeData() and the corresponding .data() function are used to attach data behind an element, say if you wanted to note that a specific list element referred to user ID 25 in your database:

var $li = $('<li>Joe</li>').data('id', 25);

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

But why are you clearing, divToUpdate.html(data); will completely replace the old HTML.



var $div = $('#desiredDiv');
$div.contents().remove();
$div.html('<p>This is new HTML.</p>');

That should work just fine.


you should be able to just overwrite it without removing previous data


divToUpdate.innerHTML =     "";   

jQuery Data is a different concept than HTML. removeData is not for removing element content, it's for removing data items you've previously stored.

Just do

divToUpdate.html("");

or

divToUpdate.empty();