¿Cómo borrar todos los contenidos de <div> s dentro de un padre <div>?

Tengo un div <div id="masterdiv">que tiene varios hijos <div>s.

Ejemplo:

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

¿Cómo borrar el contenido de todos los niños <div>dentro del maestro <div>usando jQuery?

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

La empty()función de jQuery hace justamente eso:

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

despeja al maestro div.

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

borra todo el niño div, pero deja al maestro intacto.

Use la sintaxis del selector CSS de jQuery para seleccionar todos los divelementos dentro del elemento con id masterdiv. Luego llame empty()para borrar los contenidos.

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

Usar text('')o html('')provocará un análisis de cadenas, lo que generalmente es una mala idea cuando se trabaja con DOM. Intente y utilice métodos de manipulación DOM que no impliquen representaciones en cadena de objetos DOM siempre que sea posible.

jQuery recomienda usar ".empty ()", ". remove ()", ". detach ()"

si necesita eliminar todos los elementos en el elemento, use este código:

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

si necesita eliminar todos los elementos, use este código:

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

i y jQuery group no recomiendan usar SET FUNCTION como .html () .attr () .text (), ¿qué es eso? es SI DESEA CONFIGURAR ALGO QUE NECESITA

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

Si todos los divs dentro de ese masterdiv necesitan ser borrados, esto.

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

de lo contrario, debe iterar en todos los hijos div de #masterdiv y verificar si la identificación comienza con childdiv.

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

La mejor manera es:

 $( ".masterdiv" ).empty();

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

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

o

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

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

o

$('.div_class').empty();

Funciona bien para eliminar contenidos dentro de un div

Puede usar la función .empty () para borrar todos los elementos secundarios

 $(document).ready(function () {
  $("#button").click(function () {
   //only the content inside of the element will be deleted
   $("#masterdiv").empty();
  });
 });

Para ver la comparación entre jquery .empty (), .hide (), .remove () y .detach (), siga aquí http://www.voidtricks.com/jquery-empty-hide-remove-detach/

Cuando agregue datos a div por id utilizando cualquier servicio o base de datos, primero inténtelo vacío, así:

var json = jsonParse(data.d);
$('#divname').empty();

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

o

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

Sé que esta es una jQuerypregunta relacionada, pero creo que alguien podría llegar aquí esperando una Javascriptsolución pura . Entonces, si estaba tratando de hacer esto usando js, podría usar la innerHTMLpropiedad y establecerla en una cadena vacía.

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

pruébalos si te ayuda.

$('.div_parent .div_child').empty();

$('#div_parent #div_child').empty();