Öğeleri sınıf adına göre mi kaldırıyorsunuz?

Sınıf adlarıyla öğeleri bulmak için aşağıdaki koda sahibim:

// Get the element by their class name
var cur_columns = document.getElementsByClassName('column');

// Now remove them

for (var i = 0; i < cur_columns.length; i++) {

}

Sadece onları nasıl kaldıracağımı bilmiyorum ..... Ebeveyne veya başka bir şeye başvurmam gerekiyor mu? Bunu halletmenin en iyi yolu nedir?

@ Karim79:

İşte JS:

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");
var len = col_wrapper.length;

alert(len);

for (var i = 0; i < len; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        col_wrapper[i].parentNode.removeChild(col_wrapper[i]);
    }
}

İşte HTML:

<div class="columns" id="columns">
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div name="columnClear" class="contentClear" id="columnClear"></div>
</div>

Düzenleme: Sadece jQuery seçeneğini kullanarak bitti.

JQuery kullanarak (ki bu durumda gerçekten kullanıyor olabilirsiniz), bunu şu şekilde yapabilirsiniz:

$('.column').remove();

Aksi takdirde, onu kaldırmak için her bir öğenin üstünü kullanmanız gerekecektir:

element.parentNode.removeChild(element);

JQuery'yi kullanmamayı tercih ederseniz:

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

ES6 kullanarak şunları yapabilirsiniz:

const removeElements = (elms) => elms.forEach(el => el.remove());

// Use like:
removeElements( document.querySelectorAll(".remove") );

<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>

Saf Javascript ile, jQuery veya ES6 olmadan şunları yapabilirsiniz:

const elements = document.getElementsByClassName("my-class");

while (elements.length > 0) elements[0].remove();

Bu benim için çalışıyor

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }

Brett - getElementyByClassNameIE 5.5'ten 8'e kadar olan desteğin tuhaf moda göre orada olmadığının farkında mısınız ? Tarayıcılar arası uyumluluğu önemsiyorsanız, bu kalıbı izlemeniz daha iyi olur:

• Kimliğe göre kapsayıcı öğesini alın.
• Etiket adına göre gerekli alt öğeleri alın.
• Alt öğelerde yineleyin, className özelliğinin eşleşip eşleşmediğini test edin.
• elements[i].parentNode.removeChild(elements[i]) diğerlerinin dediği gibi.

Hızlı örnek:

var cells = document.getElementById("myTable").getElementsByTagName("td");
var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
    }
}

İşte hızlı bir demo.

DÜZENLEME: İşaretlemenize özel sabit sürüm:

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");

var elementsToRemove = [];
for (var i = 0; i < col_wrapper.length; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        elementsToRemove.push(col_wrapper[i]);
    }
}
for(var i = 0; i < elementsToRemove.length; i++) {
    elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
}

Sorun benim hatamdı; ortaya çıkan öğe dizisinden bir öğeyi kaldırdığınızda, uzunluk değişir, böylece her yinelemede bir öğe atlanır. Çözüm, geçici bir dizideki her öğeye bir başvuru depolamak, ardından bunlar üzerinde döngü oluşturarak her birini DOM'dan kaldırmaktır.

Burada deneyin.

Ben kullanmayı tercih forEachüzerinde for/ whiledöngü. Kullanmak HTMLCollectioniçin Arrayönce dönüştürmek gerekir :

Array.from(document.getElementsByClassName("post-text"))
    .forEach(element => element.remove());

Dikkat edin, en verimli yol gerekli değildir. Benim için çok daha zarif.

Tek çizgi

document.querySelectorAll(".remove").forEach(el => el.remove());

Örneğin, bu sayfada kullanıcı bilgilerini kaldırmak için yapabilirsiniz.

document.querySelectorAll(".user-info").forEach(el => el.remove());

Evet, ebeveynden çıkarmanız gerekir:

cur_columns[i].parentNode.removeChild(cur_columns[i]);

Bu sözdizimini kullanabilirsiniz: node.parentNode

Örneğin:

someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);

Özyinelemeli işlev, sorununuzu aşağıdaki gibi çözebilir

removeAllByClassName = function (className) {
    function findToRemove() {
        var sets = document.getElementsByClassName(className);
        if (sets.length > 0) {
            sets[0].remove();
            findToRemove();
        }
    }
    findToRemove();
};
//
removeAllByClassName();

Dinamik olarak eklenen öğeleri kaldırmak istemeniz durumunda şunu deneyin:

document.body.addEventListener('DOMSubtreeModified', function(event) {
    const elements = document.getElementsByClassName('your-class-name');
    while (elements.length > 0) elements[0].remove();
});

const elem= document.getElementsByClassName('column')

for (let i = elem.length; 0 < i ; )
    elem[--i].remove();

VEYA

const elem= document.getElementsByClassName('column')

while (elem.length > 0 )
    elem[0].remove();

Çok basit, tek satırlık, ES6 yayılma işleci nedeniyle document.getElementByClassName bir HTML koleksiyonu döndürür.

[...document.getElementsByClassName('dz-preview')].map(thumb => thumb.remove());

Buradaki atlama öğeleri hatası (yukarıdaki kod)

var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
    }
}

Döngü aşağıdaki gibi geriye doğru çalıştırılarak düzeltilebilir (böylece geçici diziye gerek kalmaz)

var len = cells.length;
for(var i = len-1; i >-1; i--) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
   }
}

Basit bir çözüm kullanabilirsiniz, sadece sınıfı değiştirin, HTML Koleksiyonu filtresi güncellenir:

var cur_columns = document.getElementsByClassName('column');

for (i in cur_columns) {
   cur_columns[i].className = '';
}

Referans: http://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html