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.
javascript
removeclass
Brett
sumber
sumber
Jawaban:
Menggunakan jQuery (yang menurut Anda benar-benar bisa digunakan dalam kasus ini), Anda bisa melakukan ini seperti ini:
Jika tidak, Anda harus menggunakan induk dari setiap elemen untuk menghapusnya:
sumber
Jika Anda memilih untuk tidak menggunakan JQuery:
sumber
elements
array.getElementsByClassName
adalah koleksi langsung. developer.mozilla.org/en-US/docs/Web/API/NodeListMenggunakan ES6 yang dapat Anda lakukan seperti:
sumber
Dalam Javascript murni, tanpa jQuery atau ES6, Anda dapat melakukan:
sumber
Ini bekerja untuk saya
sumber
Brett - apakah Anda sadar bahwa
getElementyByClassName
dukungan dari IE 5.5 ke 8 tidak ada menurut quirksmode ? Anda akan lebih baik mengikuti pola ini jika Anda peduli tentang kompatibilitas lintas-browser:elements[i].parentNode.removeChild(elements[i])
seperti kata orang lain.Contoh cepat:
Ini demo cepat.
EDIT: Ini adalah versi tetap, khusus untuk markup Anda:
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.
sumber
Saya lebih suka menggunakan
forEach
overfor
/while
looping. Untuk menggunakannya, perlu mengonversiHTMLCollection
menjadi yangArray
pertama:Perhatikan, itu tidak perlu cara yang paling efisien. Jauh lebih elegan untukku.
sumber
Satu baris
Misalnya Anda dapat melakukannya di halaman ini untuk menghapus userinfo
sumber
Ya, Anda harus menghapus dari induk:
sumber
Anda dapat menggunakan sintaks ini:
node.parentNode
Sebagai contoh:
sumber
Fungsi rekursif dapat memecahkan masalah Anda seperti di bawah ini
sumber
Jika Anda ingin menghapus elemen yang ditambahkan secara dinamis coba ini:
sumber
ATAU
sumber
Ini sangat sederhana, satu-liner, menggunakan operator karena ES6 karena dokumen.getElementByClassName mengembalikan koleksi HTML.
sumber
Bug elemen lompatan di ini (kode dari atas)
dapat diperbaiki dengan hanya menjalankan loop ke belakang sebagai berikut (sehingga array sementara tidak diperlukan)
sumber
Anda dapat menggunakan solusi sederhana, cukup ganti kelas, filter Koleksi HTML diperbarui:
Ref: http://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html
sumber