Come cancellare tutti i contenuti di <div> s all'interno di un <div> parent?

Ho un div <div id="masterdiv">che ha diversi figli <div>.

Esempio:

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

Come cancellare il contenuto di tutti i bambini <div>all'interno del master <div>usando jQuery?

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

La empty()funzione di jQuery fa proprio questo:

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

cancella il maestro div.

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

cancella tutti i bambini div, ma lascia intatto il maestro.

Utilizzare la sintassi del selettore CSS di jQuery per selezionare tutti gli divelementi all'interno dell'elemento con id masterdiv. Quindi chiama empty()per cancellare il contenuto.

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

L'uso text('')o html('')causerà l'analisi delle stringhe, il che è generalmente una cattiva idea quando si lavora con il DOM. Prova e usa i metodi di manipolazione DOM che non implicano rappresentazioni di stringhe di oggetti DOM ove possibile.

jQuery consiglia di utilizzare ".empty ()", ". remove ()", ". detach ()"

se è necessario eliminare tutti gli elementi nell'elemento, utilizzare questo codice:

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

se è necessario eliminare tutto l'elemento, utilizzare questo codice:

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

io e il gruppo jQuery non raccomandiamo di usare SET FUNCTION come .html () .attr () .text (), che cos'è? è SE VUOI IMPOSTARE TUTTO QUELLO CHE BISOGNA

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

Se tutti i div all'interno di quel masterdiv devono essere cancellati, è così.

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

altrimenti, devi iterare su tutti i figli div di #masterdiv e verificare se l'id inizia con childdiv.

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

Il modo migliore è:

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

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

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

o

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

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

o

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

Funziona bene per rimuovere i contenuti all'interno di un div

È possibile utilizzare la funzione .empty () per cancellare tutti gli elementi figlio

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

Per vedere il confronto tra jquery .empty (), .hide (), .remove () e .detach () segui qui http://www.voidtricks.com/jquery-empty-hide-remove-detach/

Quando si aggiungono i dati in div in base all'id utilizzando qualsiasi servizio o database, prima provarli vuoti, in questo modo:

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();});

So che questa è una jQuerydomanda correlata, ma credo che qualcuno potrebbe arrivare qui aspettandosi una Javascriptsoluzione pura . Quindi, se stavi provando a farlo usando js, potresti usare la innerHTMLproprietà e impostarla su una stringa vuota.

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

provali se aiuta.

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

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