Rimuovi elemento per ID

Quando rimuovi un elemento con JavaScript standard, devi prima andare al suo genitore:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Dover passare prima al nodo padre mi sembra un po 'strano, c'è un motivo per cui JavaScript funziona in questo modo?

So che aumentare le funzioni DOM native non è sempre la soluzione migliore o più popolare, ma funziona bene per i browser moderni.

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

E quindi puoi rimuovere elementi come questo

document.getElementById("my-element").remove();

o

document.getElementsByClassName("my-elements").remove();

Nota: questa soluzione non funziona per IE 7 e versioni precedenti. Per maggiori informazioni sull'estensione del DOM leggi questo articolo .

EDIT : rivedere la mia risposta nel 2019, node.remove()è venuto in soccorso e può essere utilizzato come segue (senza il polyfill sopra):

document.getElementById("my-element").remove();

o

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

Queste funzioni sono disponibili in tutti i browser moderni (non IE). Ulteriori informazioni su MDN .

Crossbrowser e IE> = 11:

document.getElementById("element-id").outerHTML = "";

Potresti creare una removefunzione in modo da non doverci pensare ogni volta:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

È ciò che supporta il DOM . Cerca quella pagina "rimuovi" o "elimina" e rimuoviChild è l'unico che rimuove un nodo.

Il DOM è organizzato in un albero di nodi, in cui ogni nodo ha un valore, insieme a un elenco di riferimenti ai suoi nodi figlio. Quindi element.parentNode.removeChild(element)imita esattamente ciò che sta accadendo internamente: prima vai al nodo padre, quindi rimuovi il riferimento al nodo figlio.

Come di DOM4, una funzione di supporto viene fornito per fare la stessa cosa: element.remove(). Questo funziona in 87% dei browser (come del 2016), ma non IE 11. Se è necessario supportare i browser più vecchi, è possibile:

• Rimuovi gli elementi tramite il nodo padre, come nella domanda ,
• modificare le funzioni DOM native, come nella risposta di Johan Dettmar , oppure
• utilizzare un polifill DOM4 .

Per rimuovere un elemento:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

Per rimuovere tutti gli elementi con ad esempio un determinato nome di classe:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

puoi semplicemente usare element.remove()

Il ChildNode.remove()metodo rimuove l'oggetto dall'albero a cui appartiene.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Ecco un violino che mostra come si può chiamare document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Non è necessario estendere NodeList. È già stato implementato.

**

Puoi rimuovere direttamente quell'elemento usando il remove()metodo DOM.

ecco un esempio:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Secondo livello di DOM 4 specifiche, che è la versione attuale in fase di sviluppo, ci sono alcuni nuovi metodi a portata di mano di mutazione disponibili: append(), prepend(), before(), after(), replace(), e remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

Dover passare prima al nodo padre mi sembra un po 'strano, c'è un motivo per cui JavaScript funziona in questo modo?

Il nome della funzione è removeChild()e come è possibile rimuovere il figlio quando non ci sono genitori? :)

D'altra parte, non devi sempre chiamarlo come hai mostrato. element.parentNodeè solo un aiuto per ottenere il nodo genitore del nodo dato. Se conosci già il nodo genitore, puoi semplicemente usarlo in questo modo:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

================================================== =======

Per aggiungere qualcosa di più:

Alcune risposte hanno sottolineato che invece di utilizzare parentNode.removeChild(child);, è possibile utilizzare elem.remove();. Ma come ho notato, c'è una differenza tra le due funzioni e non è menzionato in quelle risposte.

Se lo usi removeChild(), restituirà un riferimento al nodo rimosso.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

Ma se usi elem.remove(); , non ti restituirà il riferimento.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Questo comportamento può essere osservato in Chrome e FF. Credo che valga la pena notare :)

Spero che la mia risposta aggiunga un valore alla domanda e sarà utile !!

Le funzioni che usano ele.parentNode.removeChild (ele) non funzioneranno per gli elementi che hai creato ma non ancora inserito nell'HTML. Le librerie come jQuery e Prototype usano saggiamente un metodo come il seguente per eludere tale limitazione.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

Penso che JavaScript funzioni così perché i progettisti originali del DOM consideravano il genitore / figlio e la navigazione precedente / successiva una priorità più alta rispetto alle modifiche DHTML che sono così popolari oggi. Essere in grado di leggere da un <input type = 'text'> e scrivere ad un altro in base alla posizione relativa nel DOM è stato utile a metà degli anni '90, un'epoca in cui la generazione dinamica di interi moduli HTML o elementi interattivi della GUI era a malapena un luccichio in l'occhio di alcuni sviluppatori.

Dover passare prima al nodo padre mi sembra un po 'strano, c'è un motivo per cui JavaScript funziona in questo modo?

IMHO: La ragione di ciò è la stessa che ho visto in altri ambienti: stai eseguendo un'azione basata sul tuo "link" a qualcosa. Non puoi eliminarlo mentre sei collegato ad esso.

Come tagliare un ramo d'albero. Siedi sul lato più vicino all'albero mentre tagli o il risultato sarà ... sfortunato (anche se divertente).

Questo in realtà proviene da FireFox ... per una volta, IE era in vantaggio rispetto al pacchetto e ha permesso la rimozione diretta di un elemento.

Questo è solo il mio presupposto, ma credo che il motivo per cui è necessario rimuovere un figlio tramite il genitore sia dovuto a un problema con il modo in cui FireFox ha gestito il riferimento.

Se chiami un oggetto per commettere direttamente hari-kari, quindi immediatamente dopo la sua morte, stai ancora mantenendo quel riferimento ad esso. Questo ha il potenziale per creare diversi bug cattivi ... come non riuscire a rimuoverlo, rimuoverlo ma mantenendo i riferimenti ad esso che sembrano validi, o semplicemente una perdita di memoria.

Credo che quando hanno capito il problema, il problema era rimuovere un elemento attraverso il suo genitore perché quando l'elemento è sparito, ora stai semplicemente tenendo un riferimento al genitore. Ciò fermerebbe tutta quella spiacevolezza e (se si chiudesse un nodo ad albero per nodo, per esempio) si "comprimerebbe" piuttosto bene.

Dovrebbe essere un bug facilmente risolvibile, ma come per molte altre cose nella programmazione web, il rilascio è stato probabilmente affrettato, portando a questo ... e quando è arrivata la versione successiva, abbastanza persone lo stavano usando che cambiare questo avrebbe portato a rompere un mucchio di codice.

Ancora una volta, tutto questo è semplicemente una mia ipotesi.

Attendo comunque con impazienza il giorno in cui la programmazione web finalmente avrà una completa pulizia primaverile, tutte queste strane idiosincrasie vengono ripulite e tutti iniziano a giocare con le stesse regole.

Probabilmente il giorno dopo il mio servitore di robot mi fa causa per salari arretrati.

Da quanto ho capito, la rimozione diretta di un nodo non funziona in Firefox, ma solo in Internet Explorer. Quindi, per supportare Firefox, devi andare dal genitore per rimuoverlo.

Rif: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}

Questa è la migliore funzione per rimuovere un elemento senza errore di script:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

Nota a EObj=document.getElementById(EId) .

Questo è UN segno uguale no == .

se l'elemento EIdesiste, la funzione lo rimuove, altrimenti restituisce false, no error.