clear all divs' contents inside a div

Question

I have a div <div id="masterdiv"> in which i will have several child divs.

For example:

<div id="masterdiv">
    <div id="childdiv1" />
    <div id="childdiv2" />
    <div id="childdiv3" />
</div>

I need to clear the contents of all child divs inside the master div using jquery.

How to achieve it?

Answer 1

$("#masterdiv div").text("");

Answer 2

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

Answer 3

If all the divs inside that masterdiv needs to be cleared, it this.

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

else, you need to iterate on all the div children of #masterdiv, and check if the id starts with childdiv.

$('#masterdiv div).each(
    function(element){
     if(element.attr('id').substr(0, 8) == "childdiv")
     {
      element.html('');
     }
    }
 );

Answer 4

$("#masterdiv > *").text("")

or

$("#masterdiv").children().text("")

Answer 5

jQeury's empty() function does just that:

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

Answer 6

$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty;});

or

$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty;});

Answer 7

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.