Menghapus elemen dengan nama kelas?

126

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.

Brett
sumber
4
Jujur saja, cara terbaik adalah menggunakan jQuery. Tidak terlalu mengerti mengapa ada orang yang ingin melakukan manipulasi DOM dengan tangan lagi.
Tyler Eaves
7
Saya tidak tahu lol .... Saya hanya merasa saya merasa kotor mengetahui kerangka kerja & tidak memiliki pengetahuan untuk dapat benar-benar menggunakan vanilla JS. Karena saya bukan orang JS BESAR, saya mencoba & hanya kode dengan vanilla JS ketika saya menggunakannya jadi saya tidak lupa hal-hal lol
Brett
20
Baik. Siapa yang mau menjadi pengembang yang berpengetahuan luas dan berpengetahuan luas. Konyol!
user113716
1
Pendekatan yang baik, tentu saja, tetapi hanya karena Anda menggunakan jQuery, tidak berarti Anda harus menyerah untuk memahami cara kerjanya atau apa yang ditawarkan DOM yang mendasarinya. Anda mungkin dapat memperbaiki mobil Anda jika Anda menginginkan (DOM), tetapi mekanik Anda mungkin lebih berpengalaman dalam hal itu (tim jQuery).
Lior Cohen
2
@Lior: Ya, montir saya tidak perlu membantu saya memutar kunci atau menurunkan jendela saya. ; o)
user113716

Jawaban:

189

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);
Lior Cohen
sumber
41
+0,75 untuk menggunakan jQuery, +0,25 untuk juga memberikan solusi non-jQuery: p
ThiefMaster
7
+0,01 untuk menggunakan jQuery, +0,99 untuk juga memberikan solusi non-jQuery: p
Alex Pyzhianov
183

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]);
    }
}
Veikko Karsikko
sumber
1
Sejumlah mengejutkan solusi tidak bekerja di luar sana. Ini benar. Terima kasih!
penguinsource
11
Jika ada yang bertanya-tanya mengapa dia menghapus elemen pertama (indeks 0) selalu, itu karena ketika Anda menghapus elemen, itu juga menyusut elementsarray.
Jefferson Lima
bagaimana dengan indeks orang lain (terima indeks 0)?
ofir_aghai
1
@ofir_aghai sebagai @JeffersonLima menunjukkan itu getElementsByClassNameadalah koleksi langsung. developer.mozilla.org/en-US/docs/Web/API/NodeList
Veikko Karsikko
2
Pengamatan yang bagus tentang fakta bahwa susunan elemen menyusut
ferralucho
33

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>

Roko C. Buljan
sumber
Untuk memanfaatkan ES6 lebih lanjut, bagaimana: var removeElements = (elms) => [... elms] .forEach (el => el.remove ());
Calculuswhiz
1
Jawaban terbaik, terima kasih!
Francesco
25

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

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

while (elements.length > 0) elements[0].remove();
tocqueville
sumber
2
Jawaban paling jelas tanpa jQuery dan ES6
Eric
2
Mungkin jawaban Anda datang kemudian - seharusnya jawaban yang diterima karena tidak bergantung pada jQuery. Secara umum lebih baik menggunakan vanilla-js, bukan?
Luckyfella
Jawaban terbaik tanpa jQuery yang tidak perlu dan berani. Katakan TIDAK untuk jQuery. Ya untuk es vanila!
Thanasis
13

Ini bekerja untuk saya

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }
Уляна Різник
sumber
10

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.

karim79
sumber
Terima kasih untuk itu - meskipun ini bukan masalah besar karena ini untuk bagian admin jadi benar-benar satu orang akan menggunakannya .... tetapi masih akan mempertimbangkan komentar Anda.
Brett
@ Brett - tetap lakukan! Ini akan memakan waktu beberapa menit dari waktu Anda dan Anda akan mendapatkan tambahan balita di kantor :)
karim79
Ok saya coba ini ... ini melaporkan jumlah elemen yang benar ketika saya melakukan peringatan, tetapi hanya menghapus dua dari empat dengan nama kelas itu & saya mendapat kesalahan ini: col_wrapper [i] tidak terdefinisi. Saya akan memperbarui posting saya dengan kode yang saya gunakan.
Brett
@ Brett - jika Anda tertarik, saya memperbaiki kode Anda yang diperbarui, dan mengomentari masalahnya.
karim79
Sobat, ini membantu saya lebih dari yang bisa Anda bayangkan dengan masalah yang saya telah bingung selama dua jam terakhir. TERIMA KASIH!
Zoolander
4

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.

Alexander
sumber
4

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());
Mohsen
sumber
1

Ya, Anda harus menghapus dari induk:

cur_columns[i].parentNode.removeChild(cur_columns[i]);
David Tang
sumber
1

Anda dapat menggunakan sintaks ini: node.parentNode

Sebagai contoh:

someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);
Komputeris
sumber
2
Pertanyaan ini diminta dihapus oleh className
JoeTidee
1

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();
Bisakah TETAP
sumber
1
Haha menghindari satu lingkaran. <3
Ivan Ivkovic
0

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();
});
lchachurski
sumber
0
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();
Fatih Ertuğral
sumber
0

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

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

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]);
   }
}
shao.lo
sumber
Ini agak rumit. Mengapa tidak menggunakan siklus sementara saja? (lihat jawaban saya)
tocqueville
@tocqueville Pertanyaan yang diposting menggunakan for for loop. Saya hanya menunjukkan cara memperbaiki bug dengan sedikit perubahan pada kodenya.
shao.lo
-3

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

Gustavo Ruiz
sumber
1
Ini tidak akan berfungsi karena array loop dimodifikasi di dalam loop itu sendiri. Hasilnya adalah elemen terakhir akan dilewati.
tocqueville