Menghapus elemen dengan nama kelas?

Saya memiliki kode di bawah ini untuk menemukan elemen dengan nama kelas mereka:

// 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++) {

}

Saya hanya tidak tahu cara menghapusnya ..... apakah saya HARUS referensi orang tua atau sesuatu? Apa cara terbaik untuk menangani ini?

@ Karim79:

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

Ini HTML-nya:

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

Sunting: Baik akhirnya hanya menggunakan opsi jQuery.

Menggunakan jQuery (yang menurut Anda benar-benar bisa digunakan dalam kasus ini), Anda bisa melakukan ini seperti ini:

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

Jika tidak, Anda harus menggunakan induk dari setiap elemen untuk menghapusnya:

element.parentNode.removeChild(element);

Jika Anda memilih untuk tidak menggunakan JQuery:

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

Menggunakan ES6 yang dapat Anda lakukan seperti:

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>

Dalam Javascript murni, tanpa jQuery atau ES6, Anda dapat melakukan:

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

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

Ini bekerja untuk saya

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

Brett - apakah Anda sadar bahwa getElementyByClassNamedukungan dari IE 5.5 ke 8 tidak ada menurut quirksmode ? Anda akan lebih baik mengikuti pola ini jika Anda peduli tentang kompatibilitas lintas-browser:

• Dapatkan elemen kontainer berdasarkan ID.
• Dapatkan elemen anak yang dibutuhkan dengan nama tag.
• Iterate over children, tes untuk mencocokkan properti className.
• elements[i].parentNode.removeChild(elements[i]) seperti kata orang lain.

Contoh cepat:

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

Ini demo cepat.

EDIT: Ini adalah versi tetap, khusus untuk markup Anda:

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

Masalahnya adalah kesalahan saya; ketika Anda menghapus elemen dari array elemen yang dihasilkan, panjangnya berubah, sehingga satu elemen dilewati di setiap iterasi. Solusinya adalah untuk menyimpan referensi ke setiap elemen dalam array sementara, kemudian kemudian mengulanginya, menghapus masing-masing dari DOM.

Coba di sini.

Saya lebih suka menggunakan forEachover for/ whilelooping. Untuk menggunakannya, perlu mengonversi HTMLCollectionmenjadi yang Arraypertama:

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

Perhatikan, itu tidak perlu cara yang paling efisien. Jauh lebih elegan untukku.

Satu baris

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

Misalnya Anda dapat melakukannya di halaman ini untuk menghapus userinfo

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

Ya, Anda harus menghapus dari induk:

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

Anda dapat menggunakan sintaks ini: node.parentNode

Sebagai contoh:

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

Fungsi rekursif dapat memecahkan masalah Anda seperti di bawah ini

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

Jika Anda ingin menghapus elemen yang ditambahkan secara dinamis coba ini:

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

ATAU

const elem= document.getElementsByClassName('column')

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

Ini sangat sederhana, satu-liner, menggunakan operator karena ES6 karena dokumen.getElementByClassName mengembalikan koleksi HTML.

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

Bug elemen lompatan di ini (kode dari atas)

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

dapat diperbaiki dengan hanya menjalankan loop ke belakang sebagai berikut (sehingga array sementara tidak diperlukan)

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

Anda dapat menggunakan solusi sederhana, cukup ganti kelas, filter Koleksi HTML diperbarui:

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

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

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