Scoateți elementul de identitate

Știu că augmentarea nativ DOM funcțiile e't întotdeauna cele mai bune sau cele mai populare soluție, dar acest lucru funcționează bine pentru browserele moderne.

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

Și apoi, puteți elimina elemente, cum ar fi acest lucru

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

sau

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

Notă: această soluție nu't de lucru pentru IE 7 și de mai jos. Pentru mai multe informații despre extinderea DOM citit asta articolul.

EDIT: Revizuirea răspunsul meu în 2019, nod.elimina() a ajuns la salvare și poate fi utilizat după cum urmează (fără polyfill de mai sus):

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

sau

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

Aceste funcții sunt disponibile în toate browserele moderne (nu IE). Citește mai mult pe MDN.

Crossbrowser și IE >= 11:

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

Ai putea face o "elimina" funcția, astfel încât tu nu't trebuie să mă gândesc de fiecare dată:

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

It's ce DOM sprijină. De căutare pagina pentru "eliminați" sau "ștergeți" și removeChild este singura care se elimină un nod.

DOM este organizat într-un copac de noduri, în care fiecare nod are o valoare, împreună cu o listă de referințe la nodurile sale de copil. Deci, element.parentNode.removeChild(element) imita exact ceea ce se întâmplă pe plan intern: în Primul rând du-te la nodul părinte, apoi scoateți referire la nodul copil.

Ca de DOM4, un helper funcție este prevăzută să facă același lucru: element.elimina(). Acest lucrări în 87% din browsere (din 2016), dar nu IE 11. Dacă aveți nevoie pentru a sprijini mai vechi browsere, puteți:

• Elimina elemente prin intermediul nodului părinte, ca în question,
• modificarea nativ DOM funcții, ca în Johan Dettmar's a răspunde, sau
• utilizați un DOM4 polyfill.

Pentru a scoate un element:

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

Pentru eliminarea tuturor elementelor cu, de exemplu, un anumit nume de clasă:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 

puteți folosi doar element.elimina()

Anii ChildNode.elimina() metoda elimină obiectul din copac îi aparține.

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

Aici este o vioara care arată cum te poți numi document.getElementById('meu-id-ul').elimina()`

https://jsfiddle.net/52kp584L/

**

Nu este nevoie de a extinde NodeList. Acesta a fost implementat deja.

**

Având pentru a merge la nodul părinte primul pare un pic ciudat pentru mine, e un motiv de JavaScript funcționează ca aceasta?

Numele funcției este removeChild(), și cum este posibil pentru a elimina copilul atunci când nu's nici un părinte nu? :)

Pe de altă parte, nu trebuie întotdeauna să-l numesc-ați arătat-o. element.parentNode este doar un ajutor pentru a obține părinte nod de nod dat. Dacă știți deja nod părinte, puteți pur și simplu utiliza astfel:

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

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

Să mai adaug ceva:

Unele răspunsuri au subliniat faptul că, în loc de a folosi parentNode.removeChild(copil);, puteți utiliza elem.remove();. Dar după cum am observat, există o diferență între cele două funcții, și-l's nu sunt menționate în aceste răspunsuri.

Dacă utilizați removeChild(), se va returna o referință la scos nodul.

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

Dar, dacă folosiți elem.remove();, nu va't vă întoarceți de referință.

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

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

Acest comportament poate fi observat în Chrome si FF. Cred Că's de remarcat :)

Sper că răspunsul meu se adaugă o valoare la întrebare și va fi de ajutor!!

Funcțiile care folosesc ele.parentNode.removeChild(ele) a câștigat't de lucru pentru elemente'am creat, dar nu este încă introdus în HTML. Biblioteci, cum ar fi jQuery și Prototip cu înțelepciune utilizați o metodă ca următoarele să se sustragă de la această limitare.

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

Cred JavaScript funcționează pentru că DOM's original designeri a avut loc părinte/copil și anterior/următor navigare ca o prioritate mai mare decât DHTML modificări care sunt atât de populare astăzi. A fi capabil să citească de la o <input tip='text'> și scrie la altul de locație relativă în DOM a fost util la mijlocul anilor ' 90, un timp, atunci când generarea dinamică a întregii forme HTML sau interactive elemente GUI a fost abia o sclipire în unele developer's.

Potrivit DOM nivel 4 specificatii, care este versiunea curentă în dezvoltare, există unele noi îndemână mutație metode disponibile: append(), adauga(), înainte(), după(), replace ()", și " remove().

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

Direct puteți elimina acest element, prin utilizarea elimina()` metoda de DOM.

aici's un exemplu:

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

Având pentru a merge la nodul părinte primul pare un pic ciudat pentru mine, este acolo un motiv JavaScript funcționează ca aceasta?

IMHO: motivul pentru acest lucru este la fel ca'am văzut în alte medii: în care se desfășoară o acțiune bazat pe "link" a ceva. Puteți't-l ștergeți în timp ce're legate de acesta.

Ca tăierea unui copac membrelor. Stai pe partea cea mai apropiată de copac în timp ce de tăiere sau rezultatul va fi nefericit (deși amuzant).

Acest fapt vine de la FireFox... o dată, de EXEMPLU, a fost înainte de ambalaj și a permis eliminarea unui element direct.

Asta e doar presupunerea mea, dar cred că motivul pentru care trebuie să scoateți un copil prin mamă se datorează o problemă cu modul în FireFox manipulate de referință.

Dacă apelați un obiect la hara-kiri direct, apoi, imediat după ce acesta moare, nu sunt încă pe exploatație care fac referire la acesta. Acest lucru are potențialul de a crea mai multe bug-uri urât... cum ar fi faptul că nu pentru a elimina-l, scoate-l, dar păstrând referințele care apar valabil, sau pur și simplu o scurgere de memorie.

Eu cred că atunci când și-au dat seama de problemă, de lucru în jurul valorii de a fost de a elimina un element, prin intermediul societății sale mamă pentru că atunci când elementul este plecat, ești pur și simplu deține o referință la mamă. Acest lucru s-ar opri toate neplăcerile, și (dacă închiderea unui copac nod cu nod, de exemplu) ar 'zip-up' mai degrabă frumos.

Ar trebui să fie ușor de rezolvare bug, dar, ca multe alte lucruri în programare web, lansarea a fost, probabil, s-au grabit, ceea ce duce la acest lucru. și când următoarea versiune a venit în jurul valorii de, suficient de mulți oameni au fost folosind-o ca schimbarea aceasta ar duce la rupere o grămadă de cod.

Din nou, toate acestea sunt doar presupuneri.

Eu, cu toate acestea, aștept cu nerăbdare ziua când o programare web devine în cele din urmă o deplină curățenie de primăvară, toate aceste ciudat idiosynchracies te speli, și toată lumea începe să joace după aceleași reguli.

Probabil după ziua mea de robot servitor mă dă în judecată pentru plata salariilor restante.

Din ce am inteles, eliminarea unui nod direct nu funcționează în Firefox, doar Internet Explorer. Deci, pentru a sprijini Firefox, trebuie să te duci până la părintele să-l elimina's copil.

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

Acesta este cel mai bun funcția de a elimina un element fără eroare de script:

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

Notă pentru a EObj=document.getElementById(EId).

Acest lucru este UN semn egal nu ==.

dacă elementul " EId "există, atunci funcția elimină, în caz contrar returnează false, nu "eroare".