Öğeyi kimliğe göre kaldır

Standart JavaScript ile bir öğeyi kaldırırken önce üst öğeye gitmelisiniz:

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

İlk önce ana düğüme gitmem bana biraz garip geliyor, JavaScript'in böyle çalışmasının bir nedeni var mı?

Yerel DOM işlevlerini artırmanın her zaman en iyi veya en popüler çözüm olmadığını biliyorum, ancak bu modern tarayıcılar için iyi çalışıyor.

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

Ve sonra böyle öğeleri kaldırabilirsiniz

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

veya

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

Not: Bu çözüm IE 7 ve önceki sürümlerde çalışmaz. DOM'u genişletme hakkında daha fazla bilgi için bu makaleyi okuyun .

EDIT : Cevabımı 2019 yılında gözden geçirdiğimde, node.remove()kurtarmaya geldi ve aşağıdaki gibi kullanılabilir (yukarıdaki çoklu dolgu olmadan):

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

veya

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

Bu işlevler tüm modern tarayıcılarda (IE değil) kullanılabilir. MDN hakkında daha fazla bilgi edinin .

Çapraz tarama ve IE> = 11:

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

Bir removeişlev yapabilir, böylece her seferinde düşünmek zorunda kalmazsınız:

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

DOM destekliyor . Bu sayfada "remove" veya "delete" için arama yapın ve removeChild , düğümü kaldıran tek sayfadır .

DOM, her düğümün bir değere sahip olduğu bir düğüm ağacında, alt düğümlerine yapılan referansların bir listesi ile organize edilir. Dolayısıyla element.parentNode.removeChild(element), dahili olarak olanları tam olarak taklit eder: Önce ana düğüme gidin, ardından alt düğüme olan referansı kaldırın.

DOM4 itibariyle bir yardımcı fonksiyon aynı şeyi yapmak için sağlanmıştır: element.remove(). Bu , tarayıcıların% 87'sinde (2016 itibariyle) çalışır, ancak IE 11'de çalışmaz. Eski tarayıcıları desteklemeniz gerekiyorsa, şunları yapabilirsiniz:

• Olduğu gibi, üst düğümün yoluyla elemanları kaldırma soruya ,
• Johan Dettmar'ın cevabında olduğu gibi yerel DOM işlevlerini değiştirmek veya
• DOM4 çoklu dolgusu kullanın .

Bir elemanı kaldırmak için:

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

Örneğin belirli bir sınıf adına sahip tüm öğeleri kaldırmak için:

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

sadece kullanabilirsin element.remove()

ChildNode.remove()Yöntem ait olduğu ağaçtan nesneyi kaldırır.

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

İşte nasıl arayabileceğinizi gösteren bir keman document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

NodeList'i genişletmeye gerek yoktur. Zaten uygulandı.

**

Bu remove()yöntemi DOM yöntemini kullanarak doğrudan kaldırabilirsiniz .

İşte bir örnek:

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

Gelişiminde güncel versiyonu DOM düzeyinde 4 belirtimleri uyarınca, bazı yeni kullanışlı mutasyon yöntemleri mevcuttur: append(), prepend(), before(), after(), replace(), ve remove().

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

İlk önce ana düğüme gitmem bana biraz garip geliyor, JavaScript'in böyle çalışmasının bir nedeni var mı?

İşlev adı removeChild()ve ebeveyn olmadığında çocuğu kaldırmak nasıl mümkün olabilir? :)

Öte yandan, her zaman gösterdiğiniz gibi aramak zorunda değilsiniz. element.parentNodeyalnızca verilen düğümün üst düğümünü almak için bir yardımcıdır. Üst düğümü zaten biliyorsanız, bunu şu şekilde kullanabilirsiniz:

Ör:

// 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

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

Daha fazlasını eklemek için:

Bazı cevaplar kullanmak yerine parentNode.removeChild(child);, kullanabileceğinizi belirtti elem.remove();. Ancak fark ettiğim gibi, iki işlev arasında bir fark var ve bu cevaplarda bahsedilmiyor.

Kullanırsanız removeChild(), kaldırılan düğüme bir başvuru döndürür.

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

Ama kullanırsanız elem.remove();, size referans döndürmez.

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

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

Bu davranış, Chrome ve FF'de görülebilir. Fark etmeye değer olduğuna inanıyorum :)

Umarım cevabım soruya biraz değer katar ve yardımcı olacaktır!

Ele.parentNode.removeChild (ele) kullanan işlevler, oluşturduğunuz ancak henüz HTML'ye eklenmemiş öğeler için çalışmaz. JQuery ve Prototype gibi kütüphaneler akıllıca aşağıdaki gibi bir yöntem kullanır.

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

JavaScript'in böyle çalıştığını düşünüyorum çünkü DOM'un orijinal tasarımcıları, bugün çok popüler olan DHTML değişikliklerinden daha yüksek bir öncelik olarak ebeveyn / çocuk ve önceki / sonraki navigasyonu tuttu. Bir <input type = 'text'> öğesinden okuyabilir ve DOM'daki göreceli konuma göre başka bir yazıya yazabilmek, tüm HTML formlarının veya etkileşimli GUI öğelerinin dinamik oluşturulmasının neredeyse hiç parlamadığı 90'lı yılların ortalarında yararlıydı. bazı geliştiricinin gözü.

İlk önce ana düğüme gitmem bana biraz garip geliyor, JavaScript'in böyle çalışmasının bir nedeni var mı?

IMHO: Bunun nedeni diğer ortamlarda gördüğümle aynı: Bir şeye "bağlantınıza" dayalı bir eylem gerçekleştiriyorsunuz. Bağlı olduğunuzda silemezsiniz.

Bir ağaç kolunu kesmek gibi. Keserken ağaca en yakın tarafta oturun yoksa sonuç talihsiz olur (komik olmasına rağmen).

Bu aslında FireFox'dan geliyor ... bir kez IE paketin önündeydi ve bir elemanın doğrudan kaldırılmasına izin verdi.

Bu sadece benim varsayımım, ancak ebeveynlerden bir çocuğu çıkarmanızın nedeninin FireFox'un referansı işleme biçimindeki bir sorundan kaynaklandığına inanıyorum.

Bir nesneyi doğrudan hari-kari işlemek için çağırırsanız, o zaman öldükten hemen sonra, hala ona referansta bulunuyorsunuz. Bunun birkaç kötü hata yaratma potansiyeli vardır ... kaldırmamak, kaldırmak ama geçerli görünen referansları tutmak veya sadece bir bellek sızıntısı gibi.

Sorunun farkına vardıklarında, etrafındaki çalışmanın bir öğeyi üst öğesi aracılığıyla kaldırmak olduğuna inanıyorum, çünkü öğe gittiğinde, artık yalnızca üst öğeye referansta bulunuyorsunuz. Bu, tüm bu tatsızlığı durduracak ve (örneğin, bir ağaç düğümünü düğümle kapatırsanız) oldukça güzel bir şekilde 'sıkıştırılabilir'.

Kolayca düzeltilebilir bir hata olmalı, ancak web programlamasında diğer birçok şeyde olduğu gibi, sürüm muhtemelen acele edildi, buna yol açtı ... ve bir sonraki sürüm geldiğinde, bunu değiştirecek kadar insan onu kullanıyordu bir grup kodu kırmak için.

Yine, bütün bunlar basitçe benim tahminim.

Bununla birlikte, web programlamanın sonunda tam bir bahar temizliği aldığını, tüm bu garip küçük deyimlerin temizlendiğini ve herkesin aynı kurallarla oynamaya başladığını dört gözle bekliyorum.

Muhtemelen robot hizmetçim ertesi gün bana geri ücretler için dava açtı.

Anladığım kadarıyla, bir düğümü doğrudan kaldırmak yalnızca Internet Explorer'da bulunan Firefox'ta çalışmıyor. Yani, Firefox'u desteklemek için, çocuğunu kaldırmak için ebeveyne gitmelisiniz.

Ref: 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);
}

Komut dosyası hatası olmayan bir öğeyi kaldırmak için en iyi işlev budur:

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

Not tutmak EObj=document.getElementById(EId) .

Bu bir eşittir işareti değil == .

öğe EIdvarsa, işlev onu kaldırır, aksi takdirde false değerini döndürür error.