Bij het verwijderen van een element met standaard JavaScript moet u eerst naar zijn ouder gaan:
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Om naar het ouderknooppunt te gaan, lijkt eerst een beetje vreemd aan mij, is er een reden waarom Javascript zo werkt?
Antwoord 1, Autoriteit 100%
Ik weet dat Augmenting Native Dom-functies niet altijd de beste of meest populaire oplossing is, maar dit werkt prima voor moderne browsers.
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]);
}
}
}
En dan kunt u elementen zoals deze verwijderen
document.getElementById("my-element").remove();
of
document.getElementsByClassName("my-elements").remove();
Opmerking: Deze oplossing werkt niet voor IE 7 en hieronder. Voor meer informatie over het uitbreiden van de DOM Lees dit artikel .
Bewerken : Mijn antwoord in 2019 bekijken, node.remove()is bij de redding gekomen en kan als volgt worden gebruikt (zonder de hierboven hierboven):
document.getElementById("my-element").remove();
of
[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());
Deze functies zijn beschikbaar in alle moderne browsers (niet in IE). Lees meer op MDN.
Antwoord 2, autoriteit 44%
Crossbrowser en IE >= 11:
document.getElementById("element-id").outerHTML = "";
Antwoord 3, autoriteit 26%
Je zou een functie removekunnen maken, zodat je er niet elke keer over hoeft na te denken:
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
Antwoord 4, autoriteit 14%
element.remove()De DOM is georganiseerd in een boomstructuur met knooppunten, waarbij elk knooppunt een waarde heeft, samen met een lijst met verwijzingen naar de onderliggende knooppunten. Dus element.parentNode.removeChild(element)bootst precies na wat er intern gebeurt: eerst ga je naar het bovenliggende knooppunt en verwijder dan de verwijzing naar het onderliggende knooppunt.
Vanaf DOM4 is er een helperfunctie beschikbaar om hetzelfde te doen: element.remove(). Deze werkt in 96% van de browsers(vanaf 2020), maar niet in IE 11. Indien nodig oudere browsers ondersteunt, kunt u:
- Verwijder elementen via het bovenliggende knooppunt, zoals in De vraag ,
- Wijzig de inheemse DOM-functies, zoals in het antwoord van Johan Dettmar , of
- Gebruik een DOM4 Polyfill .
Antwoord 5, Autoriteit 14%
Het is wat de DOM ondersteunt . Doorzoek die pagina voor “verwijderen” of “verwijderen” en removechild is de enige die een knooppunt verwijdert.
Antwoord 6, Autoriteit 5%
Voor het verwijderen van één element:
var elem = document.getElementById("yourid");
elem.parentElement.removeChild(elem);
Voor het verwijderen van alle elementen met bijvoorbeeld een bepaalde klasnaam:
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]);
Antwoord 7, Autoriteit 4%
U kunt gewoon element.remove()
Antwoord 8, Autoriteit 3%
De ChildNode.remove()methode verwijdert het object uit de boom waartoe het behoort.
https://developer.mozilla.org/en- US / DOCS / WEB / API / Kindernode / Verwijderen
Hier is een viool die laat zien hoe je document.getElementById('my-id').remove()
kunt aanroepen
https://jsfiddle.net/52kp584L/
**
Het is niet nodig om NodeList uit te breiden. Het is al geïmplementeerd.
**
Antwoord 9, autoriteit 2%
Je kunt dat element direct verwijderen met de remove()methode van DOM.
hier is een voorbeeld:
let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();
Antwoord 10, autoriteit 2%
Volgens de specificaties van DOM niveau 4, de huidige versie in ontwikkeling, zijn er enkele nieuwe handige mutatiemethoden beschikbaar: append(), prepend(), before(), after(), replace()en remove().
https://catalin.red/removing-an -element-with-plain-javascript-remove-method/
Antwoord 11
Eerst naar het bovenliggende knooppunt moeten gaan lijkt me een beetje vreemd, is er een reden waarom JavaScript zo werkt?
De functienaam is removeChild(), en hoe is het mogelijk om het kind te verwijderen als er geen ouder is? 🙂
Aan de andere kant hoef je het niet altijd te noemen zoals je hebt laten zien. element.parentNodeis slechts een hulpmiddel om het bovenliggende knooppunt van het gegeven knooppunt te krijgen. Als u het bovenliggende knooppunt al kent, kunt u het als volgt gebruiken:
Bijvoorbeeld:
// 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
================================================ ==========
Om iets meer toe te voegen:
Sommige antwoorden hebben erop gewezen dat in plaats van het gebruik van parentNode.removeChild(child);, u kunt gebruiken elem.remove();. Maar zoals ik heb opgemerkt, is er een verschil tussen de twee functies, en het wordt niet vermeld in die antwoorden.
Als u removeChild()gebruikt, zal deze een verwijzing naar het verwijderde knooppunt retourneren.
var removedChild = element.parentNode.removeChild(element);
console.log(removedChild); //will print the removed child.
Maar als u elem.remove();, ontvangt u niet de referentie.
var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined
https://developer.mozilla.org/en -US / DOCS / WEB / API / CHILDNODE / VERWIJDEREN
Dit gedrag kan worden waargenomen in Chrome en FF. Ik geloof dat het de moeite waard is om op te merken 🙂
Ik hoop dat mijn antwoord een waarde toevoegen aan de vraag en zal nuttig zijn !!
Antwoord 12
Functies die u gebruiken ele.parentNode.removeChild(ele)werkt niet voor elementen die u hebt gemaakt, maar nog niet ingevoegd in de HTML. Bibliotheken zoals jQueryEN PrototypeGebruik wijselijk een methode zoals het volgende om die beperking te ontwijken.
_limbo = document.createElement('div');
function deleteElement(ele){
_limbo.appendChild(ele);
_limbo.removeChild(ele);
}
Ik denk JavaScriptWerkt zo omdat de oorspronkelijke ontwerpers van de Dom ouder / kind en vorige / volgende navigatie als een hogere prioriteit hebben dan de DHTMLModificaties die vandaag zo populair zijn . In staat zijn om te lezen van één <input type='text'>en schrijf naar een ander door relatieve locatie in de DOM was handig in het midden van de jaren 90, een tijd waarin de dynamische generatie van volledige HTMLFormulieren of interactieve GUI-elementen was nauwelijks een twinkeling in het oog van sommige ontwikkelaar.
Antwoord 13
U kunt eenvoudig
gebruiken
document.getElementById("elementID").outerHTML="";
Het werkt in alle browsers, zelfs op Internet Explorer.
Antwoord 14
kortste
Ik verbetering SAI Sunder Antwoord omdat op de ID maakt die mogelijk maakt GetelderTebyID:
elementId.remove();
Antwoord 15
Om naar het bovenliggende knooppunt te gaan lijkt mij eerst een beetje vreemd, is er
Een reden dat Javascript zo werkt?
IMHO: De reden hiervoor is dezelfde als ik in andere omgevingen heb gezien: je voert een actie uit op basis van je “link” naar iets. Je kunt het niet verwijderen terwijl je eraan bent gelinkt.
Alsof je een boomtak omzaagt. Ga tijdens het snoeien aan de kant zitten die het dichtst bij de boom zit, anders is het resultaat … ongelukkig (hoewel grappig).
Antwoord 16
Deze komt eigenlijk van Firefox… voor een keer liep IEvoorop en kon een element rechtstreeks worden verwijderd.
Dit is slechts mijn veronderstelling, maar ik denk dat de reden dat je een kind via de ouder moet verwijderen, te wijten is aan een probleem met de manier waarop Firefoxde verwijzing behandelde.
Als je een object aanroept om hari-kari direct te plegen, dan houd je die verwijzing er nog steeds naar onmiddellijk nadat het sterft. Dit kan verschillende vervelende bugs veroorzaken… zoals het niet verwijderen, verwijderen maar behouden van verwijzingen ernaar die geldig lijken, of gewoon een geheugenlek.
Ik geloof dat toen ze zich het probleem realiseerden, de tijdelijke oplossing was om een element via zijn bovenliggende element te verwijderen, want wanneer het element weg is, houdt u nu gewoon een verwijzing naar de bovenliggende vast. Dit zou al die onaangenaamheden stoppen, en (als je bijvoorbeeld een boomknooppunt voor knooppunt sluit) zou 'zip-up'best aardig zijn.
Het zou een gemakkelijk op te lossen bug moeten zijn, maar zoals met veel andere dingen in webprogrammering, was de release waarschijnlijk overhaast, wat leidde tot dit… en tegen de tijd dat de volgende versie uitkwam, gebruikten genoeg mensen het om dit zou leiden tot het breken van een heleboel code.
Nogmaals, dit is allemaal gewoon mijn giswerk.
Ik kijk echter uit naar de dag dat webprogrammering eindelijk een volledige voorjaarsschoonmaak krijgt, al deze vreemde kleine eigenaardigheden worden opgeruimd en iedereen volgens dezelfde regels begint te spelen.
Waarschijnlijk de dag nadat mijn robotbediende me aanklaagt voor achterstallig loon.
Antwoord 17
Voor zover ik heb begrepen, werkt het rechtstreeks verwijderen van een knooppunt niet in Firefox, alleen in Internet Explorer. Dus om Firefox te ondersteunen, moet je naar de ouder gaan om het onderliggende te verwijderen.
Antwoord 18
// 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);
}
Antwoord 19
Dit is de beste functie om een element te verwijderen zonder scriptfout:
function Remove(EId)
{
return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}
Opmerking voor EObj=document.getElementById(EId).
Dit is EEN gelijkteken, niet ==.
als element EIdbestaat, verwijdert de functie het, anders retourneert het false, niet error.