Menghapus Attribute dengan removeNamedItem()

Dalam JavaScript, kita dapat menghapus atribut dari elemen HTML menggunakan metode removeNamedItem(). Metode ini digunakan pada koleksi attributes, yang merupakan kumpulan atribut yang dimiliki oleh elemen tersebut.

Menghapus atribut bisa berguna dalam berbagai kasus, seperti menghilangkan atribut disabled dari tombol, menghapus atribut class untuk mereset gaya elemen, atau menghapus atribut src dari gambar.

Cara Kerja removeNamedItem()

Metode removeNamedItem() digunakan untuk menghapus atribut yang ada dalam elemen berdasarkan nama atributnya.

Sintaks Dasar

element.attributes.removeNamedItem("nama-atribut");

• element → Elemen HTML yang ingin dimodifikasi.
• attributes → Properti yang menyimpan koleksi semua atribut dalam elemen tersebut.
• removeNamedItem("nama-atribut") → Menghapus atribut yang sesuai dengan nama yang diberikan.

Jika atribut yang dihapus tidak ditemukan, akan terjadi error. Oleh karena itu, disarankan untuk mengecek apakah atribut tersebut ada sebelum menghapusnya.

Contoh Penggunaan removeNamedItem()

1. Menghapus Atribut class dari Elemen

Misalkan kita memiliki elemen berikut dalam HTML:

<p id="paragraf" class="teks-utama">Halo, dunia!</p>

Kita bisa menghapus atribut class dari elemen <p> dengan kode berikut:

const elemen = document.getElementById("paragraf");
elemen.attributes.removeNamedItem("class");

Setelah kode dijalankan, elemen <p> tidak lagi memiliki atribut class.

2. Menghapus Atribut disabled dari Tombol

Saat sebuah tombol memiliki atribut disabled, pengguna tidak bisa mengkliknya. Kita bisa menghapus atribut ini agar tombol bisa digunakan.

<button id="tombol" disabled>Klik Saya</button>

const tombol = document.getElementById("tombol");
tombol.attributes.removeNamedItem("disabled");

Setelah atribut disabled dihapus, tombol bisa diklik seperti biasa.

3. Menghapus Atribut src dari Gambar

Kita juga bisa menghapus atribut src dari elemen gambar agar gambar tidak ditampilkan.

<img id="gambar" src="gambar.jpg" alt="Gambar Contoh">

const gambar = document.getElementById("gambar");
gambar.attributes.removeNamedItem("src");

Setelah kode ini dijalankan, elemen <img> tidak lagi memiliki src, sehingga tidak akan menampilkan gambar.

4. Memeriksa Atribut Sebelum Menghapus

Untuk menghindari error saat menghapus atribut yang tidak ada, kita bisa memeriksa keberadaannya terlebih dahulu.

const elemen = document.getElementById("paragraf");
if (elemen.attributes.getNamedItem("class")) {
    elemen.attributes.removeNamedItem("class");
    console.log("Atribut class dihapus!");
} else {
    console.log("Atribut class tidak ditemukan!");
}

Jika atribut class ada, maka akan dihapus dan pesan ditampilkan di console.

Perbedaan removeNamedItem() vs removeAttribute()

Perbedaan utama:

• removeNamedItem() bekerja dalam koleksi attributes, yang merupakan kumpulan objek atribut dalam elemen.
• removeAttribute() langsung menghapus atribut dari elemen tanpa melalui koleksi attributes.

Contoh penggunaan removeAttribute():

document.getElementById("paragraf").removeAttribute("class");

Cara ini lebih umum digunakan dibanding removeNamedItem() karena lebih sederhana.

Kapan Menggunakan removeNamedItem()?

✅ Jika bekerja dengan koleksi atribut dalam elemen (attributes).
✅ Jika ingin memanipulasi atribut sebagai objek sebelum menghapusnya.
✅ Jika ingin mengakses informasi atribut sebelum menghapusnya.

❌ Jika hanya ingin menghapus atribut tanpa perlu bekerja dengan attributes, lebih baik gunakan removeAttribute().

Kesimpulan

• removeNamedItem() digunakan untuk menghapus atribut dalam elemen HTML berdasarkan nama atribut.
• Cocok digunakan jika ingin bekerja dengan koleksi attributes dalam elemen.
• Untuk penghapusan atribut yang lebih sederhana, lebih baik gunakan removeAttribute().
• Sebaiknya selalu memeriksa keberadaan atribut sebelum menghapusnya untuk menghindari error.

Dengan memahami cara kerja removeNamedItem(), kita bisa lebih fleksibel dalam menghapus atribut dalam elemen HTML menggunakan JavaScript. Yuk, langsung coba di proyekmu!