How to clear all <div>s’ contents inside a parent <div>?

Question

jQuery's empty() function does just that:

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

clears the master div.

$('#masterdiv div').empty();

clears all the child divs, but leaves the master intact.

jQuery('#masterdiv div').html('');

Use jQuery's CSS selector syntax to select all div elements inside the element with id masterdiv. Then call empty() to clear the contents.

$('#masterdiv div').empty();

Using text('') or html('') will cause some string parsing to take place, which generally is a bad idea when working with the DOM. Try and use DOM manipulation methods that do not involve string representations of DOM objects wherever possible.

jQuery recommend you use ".empty()",".remove()",".detach()"

if you needed delete all element in element, use this code :

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

if you needed delete all element, Use this code:

$('#target_id').remove();

i and jQuery group not recommend for use SET FUNCTION like .html() .attr() .text() , what is that? it's IF YOU WANT TO SET ANYTHING YOU NEED

ref :https://learn.jquery.com/using-jquery-core/manipulating-elements/

I know this is a jQuery related question, but I believe someone might get here expecting a pure Javascript solution. So, if you were trying to do this using js, you could use the innerHTML property and set it to an empty string.

document.getElementById('masterdiv').innerHTML = '';