Modo corretto per rimuovere e aggiungere nuovo html con jQuery

Question

Ho due elementi div all'interno di un altro. A volte, dall'interattività dell'utente, questi due elementi vengono rimossi e vengono posizionati due nuovi elementi.

È opportuno rimuovere prima gli elementi esistenti? O semplicemente sovrascrivere l'html? O importa anche?

$('#item1').remove(); 
$('#item2').remove(); 
$('#itemWindow').append(newItem1); 
$('#itemWindow').append(newItem2); 

O semplicemente

$('#itemWindow').html(newItem1); 
$('#itemWindow').append(newItem2); 

Uno è meno codice, ma se l'articolo è rimosso invece? Gli oggetti non hanno ascoltatori, ma se lo facessero, farebbe la differenza?

Sono uno sviluppatore di ActionScript che si tuffa in JS e jQuery. In AS, se esistono degli ascoltatori, è opportuno rimuovere prima l'elemento per interrompere qualsiasi legame con l'oggetto, per una corretta raccolta della memoria. Queste regole sono le stesse con JS e jQuery?

Grazie!

Answer 1

Non hanno alcuna differenza. Quindi puoi andare avanti e usare il secondo metodo. come quando si utilizza questo

$('#itemWindow').html(newItem1); 

$('#item1') e $('#item2') sarà sostituito. Quindi puoi saltare la rimozione manualmente.

Come @ Glavić menzionato nel commento se si guarda alla definizione di html metodo nella fonte jQuery qui https://github.com/jquery/jquery/blob/master/src/manipulation.js#L213 troverete alla fine ha queste linee

if (elem) { 
    this.empty().append(value); 
} 

Dove in questo caso elem è vero . Quindi l'elemento sarà emptied e quindi il nuovo elemento sarà appended.

E se avessero ascoltatori poi si deve legare gli ascoltatori in un modo così che funziona con elementi aggiunti in modo dinamico come l'utilizzo di $.on

Answer 2

$ ('#') BENE1 rimuovere().; rimuoverà l'elemento con ID articolo

$ ('# item1'). html (newItem1); imposterà l'html all'interno dell'elemento con id item1

Answer 3

Se vuoi essere specifico su cosa stai effettivamente rimuovendo, dì nel caso in cui tu abbia un elemento che deve essere rimosso, ma non l'altro, quindi consiglio il primo metodo Se stai semplicemente sostituendo ogni cosa ogni volta, quindi sentiti libero di usare entrambi, l'unico problema è quello che è più leggibile per te.

Answer 4

se l'elemento ha un listener, il primo metodo è più appropriato. .remove() rimuove gli elementi stessi e tutti gli eventi associati. se l'articolo viene rimosso ma non evento, potrebbe verificarsi un errore in futuro. ma se non ci sono eventi limitati, può essere usato il secondo metodo - codice coz less.