Vanilla Javascript Remove Attribute

Vanilla Javascript Remove Attribute

4 min read Jun 20, 2024
Vanilla Javascript Remove Attribute

Menghapus Atribut dengan Vanilla JavaScript

Dalam pengembangan web, seringkali kita perlu memanipulasi elemen HTML, termasuk menghapus atribut yang tidak diperlukan. Vanilla JavaScript menyediakan beberapa cara untuk menghapus atribut dari elemen HTML. Berikut adalah beberapa metode yang umum digunakan:

1. Menggunakan removeAttribute()

Metode removeAttribute() adalah cara paling umum dan sederhana untuk menghapus atribut dari elemen HTML. Metode ini menerima nama atribut sebagai argumen dan menghapus atribut tersebut dari elemen yang ditentukan.

const myElement = document.getElementById('myElement');

// Menghapus atribut 'class'
myElement.removeAttribute('class');

// Menghapus atribut 'data-id'
myElement.removeAttribute('data-id');

2. Menentukan Atribut ke Nilai Kosong

Metode ini melibatkan menetapkan nilai atribut ke string kosong. Meskipun metode ini tidak menghapus atribut sepenuhnya dari elemen, tetapi membuat atribut menjadi tidak valid sehingga tidak akan berpengaruh pada elemen tersebut.

const myElement = document.getElementById('myElement');

// Menghapus atribut 'class'
myElement.setAttribute('class', '');

// Menghapus atribut 'data-id'
myElement.setAttribute('data-id', '');

3. Menggunakan delete

Metode delete dapat digunakan untuk menghapus atribut dari elemen HTML dengan menggunakan properti attributes yang tersedia pada setiap elemen HTML.

const myElement = document.getElementById('myElement');

// Menghapus atribut 'class'
delete myElement.attributes.class;

// Menghapus atribut 'data-id'
delete myElement.attributes['data-id'];

Kapan Menggunakan Metode yang Tepat?

  • removeAttribute(): Metode yang paling umum dan disarankan untuk menghapus atribut.
  • Menentukan Atribut ke Nilai Kosong: Metode ini dapat digunakan jika Anda ingin menjaga atribut tetap ada dalam DOM, tetapi tidak berpengaruh pada elemen.
  • delete: Metode ini lebih jarang digunakan dan bisa dianggap kurang umum.

Catatan: Metode removeAttribute() dan delete akan menghapus atribut sepenuhnya dari elemen.

Contoh Penggunaan

Teks dalam div

Setelah kode JavaScript dijalankan, elemen <div> akan menjadi:

Teks dalam div

Kesimpulan

Dengan menggunakan metode-metode yang telah dijelaskan di atas, Anda dapat dengan mudah menghapus atribut dari elemen HTML dengan Vanilla JavaScript. Pilih metode yang paling cocok untuk kebutuhan Anda dan pastikan untuk memahami perbedaan antara setiap metode agar Anda dapat menggunakannya secara efektif.