Come faccio a rimuovere un nodo figlio in HTML tramite JavaScript?

Question

C'è una funzione simile document.getElementById("FirstDiv").clear()?

Answer 1

Per rispondere alla domanda originale: esistono vari modi per farlo, ma il seguente sarebbe il più semplice.

Se hai già un handle per il nodo figlio che vuoi rimuovere, ovvero hai una variabile JavaScript che contiene un riferimento ad esso:

myChildNode.parentNode.removeChild(myChildNode);

Ovviamente, se non si utilizza una delle numerose librerie che già lo fanno, si vorrebbe creare una funzione per sottrarlo:

function removeElement(node) {
    node.parentNode.removeChild(node);
}

---

EDIT: come è stato detto da altri: se hai gestori di eventi collegati al nodo che stai rimuovendo, dovrai assicurarti di scollegarli prima che l'ultimo riferimento al nodo che viene rimosso esca dall'ambito, per non avere cattive implementazioni della memoria di perdite dell'interprete JavaScript.

Answer 2

Se si desidera cancellare il div e rimuovere tutti i nodi figlio, è possibile inserire:

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

Answer 3

targetNode.remove ()

Questo è raccomandato dal W3C alla fine del 2015 ed è JS vaniglia . Molto meglio / più pulito del metodo precedente.

Per il tuo caso d'uso:

document.getElementById("FirstDiv").remove();

Se è necessario un polyfill per garantire la retrocompatibilità:

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

Mozilla Docs

Browser supportati - 92% Mar 2018

Answer 4

Devi rimuovere tutti i gestori di eventi che hai impostato sul nodo prima di rimuoverlo, per evitare perdite di memoria in IE

Answer 5

Una soluzione jQuery

HTML

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

JavaScript

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

References:

Attributo Equals Selector [name = value]

  

Seleziona gli elementi che hanno il   attributo specificato con un valore   esattamente uguale a un certo valore.

Selettore figlio ("parent > child")

  

Seleziona tutti gli elementi figlio diretti   specificato da " child " di elementi   specificato da " parent "

.remove ()

  

Simile a .empty (), il .remove ()   Il metodo estrae gli elementi dal DOM.   Usiamo .remove () quando vogliamo   rimuovere l'elemento stesso, nonché   tutto al suo interno. Inoltre   gli elementi stessi, tutti legati   eventi e dati jQuery associati a   gli elementi vengono rimossi.

Answer 6

Utilizza il seguente codice:

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.

Answer 7

    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p è il nodo padre e c è il nodo figlio
parentNode è una variabile JavaScript che contiene il riferimento parent

Facile da capire

Answer 8

Dovresti essere in grado di utilizzare il metodo .RemoveNode del nodo o il metodo .RemoveChild del nodo padre.

Answer 9

Probabilmente dovresti usare una libreria JavaScript per fare cose del genere.

Ad esempio, MochiKit ha una funzione removeElement , e jQuery ha rimuovi .