Contoh
Hapus elemen dari dokumen
elemen const = dokumen. getElementById("demo");
elemen. menghapus();
Definisi dan Penggunaan
Metode remove()_ menghapus elemen (atau simpul) dari dokumen
Sintaksis
atauParameter
Nilai Pengembalian
Dukungan Peramban
element.remove() adalah fitur DOM Living Standard
Itu didukung di semua browser modern
ChromeEdgeFirefoxSafariOperaYaYaYaYaYaelement.remove() tidak didukung di Internet Explorer 11 (atau lebih lama)
Untuk menghapus semua kelas dari suatu elemen dalam JavaScript, setel properti className elemen ke string kosong (''), i. e. , element.className = ''. Menyetel properti className_ ke string kosong akan menghilangkan setiap kelas dalam elemen
const box = document.getElementById('box'); // 👇 Remove all classes from element. box.className = '';Untuk HTML ini
<!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> _0
<!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> _Kode JavaScript ini akan menghapus semua kelas dari kolom input saat tombol diklik
<!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> _1
const btn = document.getElementById('btn'); const input = document.getElementById('input'); btn.addEventListener('click', () => { input.className = ''; });Properti className digunakan untuk mendapatkan dan menetapkan nilai atribut <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> 3 dari elemen tertentu
Mengatur className_ ke string kosong secara efektif menghapus semua kelas dari elemen
Berlangganan Buletin Kecantikan Coding
Dapatkan wawasan bermanfaat dan tingkatkan pengetahuan pengembangan web Anda dengan tips dan tutorial mingguan dari Coding Beauty. Lebih dari 1.700 pengembang berlangganan
Hapus semua kelas dari elemen dengan metode <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> 5
Untuk menghapus semua kelas dari elemen dengan pendekatan ini, panggil metode <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> 5 pada atribut <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> 3 yang ditentukan, i. e. , <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> _8. Metode ini akan menghapus atribut <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> 3 dari elemen, secara efektif menghapus semua kelas elemen
const box = document.getElementById('box'); // 👇 Remove all classes from element box.removeAttribute('class');<!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> _5 mengambil nama dan menghapus atribut dari elemen dengan nama itu
Untuk HTML ini
<!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-image: linear-gradient(to bottom, rgb(136, 136, 255), blue); color: white; border: none; } </style> </head> <body> <button id="styled-btn" type="text" class="class-1 class-2"> Download </button> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html>Kode JavaScript ini akan menghapus semua kelas dari tombol yang ditata saat tombol lain diklik
const btn = document.getElementById('btn'); const styledButton = document.getElementById('styled-btn'); btn.addEventListener('click', () => { styledButton.removeAttribute('class'); }); _Pada metode pertama, atribut <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> _3 tetap pada elemen setelah menyetel properti className. Tetapi menggunakan metode <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> _5 menghapus sepenuhnya atribut <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> 3 dari elemen
Jika elemen tidak memiliki atribut <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> _3, <!DOCTYPE html> <html lang="en"> <head> <title>Coding Beauty Tutorial</title> <style> .class-1 { height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; } .class-2 { background-color: blue; color: white; border: 1px solid black; border-radius: 3px; } </style> </head> <body> <input id="input" type="text" class="class-1 class-2" /> <br /><br /> <button id="btn">Remove classes</button> <script src="index.js"></script> </body> </html> 5 akan kembali tanpa menyebabkan kesalahan
Salah satu dari dua metode ini baik-baik saja, terserah Anda mana yang akan dipilih. Saya pikir menggunakan properti className_ lebih baik karena lebih jelas menunjukkan apa yang Anda coba lakukan
11 Fitur JavaScript Baru yang Menakjubkan di ES13
Panduan ini akan mempercepat Anda dengan semua fitur terbaru yang ditambahkan di ECMAScript 13. Fitur baru yang kuat ini akan memodernisasi JavaScript Anda dengan kode yang lebih pendek dan lebih ekspresif
Daftar dan dapatkan salinan gratis segera
Ayibatari Ibaba
Ayibatari Ibaba adalah pengembang perangkat lunak dengan pengalaman bertahun-tahun membangun situs web dan aplikasi. Dia telah banyak menulis tentang berbagai topik pemrograman dan telah menciptakan lusinan aplikasi dan pustaka sumber terbuka