Hapus kelas dari elemen javascript

Pada artikel kali ini, kita akan membahas bagaimana javascript menghapus class dengan 2 cara berbeda. Kami juga akan melihat berbagai pendekatan untuk ini dengan berbagai contoh kehidupan nyata

Pertama-tama, mengapa kita perlu menghapus kelas dari elemen?

Bayangkan permainan sederhana melompati bola. Ketika Anda mengklik bola, itu akan berhenti melompat. Jadi dalam situasi ini, Anda hanya perlu menghapus kelas jumping dari bola

Ada banyak situasi lain di mana Anda perlu menghapus kelas dari elemen. Misalnya, hapus kelas

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Klik tombol di bawah untuk menghentikan bola agar tidak melompat

Ketika Anda mengklik tombol javascript akan menghapus kelas

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Hapus kelas JavaScript

Ada dua cara untuk menghapus kelas dari elemen menggunakan JavaScript

1. Menggunakan metode

   // selecting the div element
   let div = document.getElementById('div');
   
   // removing the class
   div.classList.remove('active');

   2
2. Menggunakan properti

   // selecting the div element
   let div = document.getElementById('div');
   
   // removing the class
   div.classList.remove('active');

   _3

1. Hapus kelas menggunakan classList. hapus() metode

Properti

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Properti

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Sintaks dari metode

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

element.classList.remove('class-name');

nama kelas adalah nama kelas yang ingin Anda hapus dari elemen.

Metode

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

// selecting the element
let element = document.getElementById('box');

// removing the class
element.className = '';

Contoh berikut akan menghapus kelas aktif dari.

Contoh

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

▶ Cobalah

2. Hapus kelas menggunakan className properti

Properti

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Ini adalah properti baca dan tulis. Ini berarti dapat digunakan untuk membaca dan daftar kelas elemen

Anda dapat menetapkan daftar kelas baru ke properti

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Mari kita lihat bagaimana Anda bisa menggunakan ini untuk menghapus kelas

Kasus 1 . Hanya ada satu kelas yang melekat pada elemen.

Jika Anda hanya memiliki satu kelas dalam daftar kelas maka hanya string kosong ( '' ) untuk itu dan kelas akan dihapus .

Contoh

// selecting the element
let element = document.getElementById('box');

// removing the class
element.className = '';

▶ Cobalah

Kasus 2 . Ada lebih dari satu kelas yang melekat pada elemen.

Trik sebenarnya adalah menghapus satu kelas dari beberapa kelas dengan properti className .

Untuk ini, Anda dapat menggunakan metode ganti string dan mengganti kelas yang diinginkan dengan string kosong dan menetapkan daftar kelas baru ke properti

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Contoh

// selecting the element
let element = document.getElementById('box');

// removing the class
// let the class to remove be 'class1'
element.className = element.className.replace('class1', '');

// this will remove 'class1' from List
// and set rest class to the element again

▶ Cobalah

JavaScript menghapus kelas jika ada

Kita telah melihat di atas classList. metode remove() mengembalikan nilai true jika kelas berhasil dihapus dan false jika kelas tidak dihapus. Kita dapat menggunakan nilai kembalian ini untuk melakukan beberapa tindakan jika kelas dihapus.

Tapi di sini kami ingin menghapus kelas jika ada. Jadi pertama-tama kita harus memeriksa apakah kelas itu ada sebelum menghapusnya

Untuk memeriksa apakah kelas tersebut ada, kita dapat menggunakan metode

// selecting the element
let element = document.getElementById('box');

// removing the class
element.className = '';

Sintaks dari metode

// selecting the element
let element = document.getElementById('box');

// removing the class
element.className = '';

element.classList.contains('class-name');

Mari kita lihat contohnya

Contoh

// selecting the element
let ball = document.getElementById('ball');

if(ball.classList.contains('jump')) {
  // remove the class
  ball.classList.remove('jump');
}

▶ Cobalah

Hapus kelas dari semua elemen javascript

Untuk menghapus kelas dari semua elemen, Anda dapat memilih semua elemen dan menggunakan metode

// selecting the div element
let div = document.getElementById('div');

// removing the class
div.classList.remove('active');

Contoh

// selecting all elements
let items = document.querySelectorAll('.items');

// Using forEach loop
items.forEach(function(item) {
  item.classList.remove('active');
});

▶ Cobalah

laporkan iklan ini

onclick tambahkan kelas dan hapus javascript kelas

Ada 2 cara untuk menambah dan menghapus kelas menggunakan acara onclick menggunakan tombol yang sama.

1. Cara pertama adalah dengan memeriksa kelas. Jika kelas ada maka hapus dan jika kelas tidak ada maka tambahkan
2. Cara kedua adalah menggunakan classList. toggle() metode. Itu menambahkan kelas jika tidak ada dan menghapus kelas jika ada.

Mari kita lihat contoh cara pertama

Contoh

function addRemoveClass() {
  // selecting the element
  let element = document.getElementById('box');

  // checking if the class exists
  if(element.classList.contains('active')) {
    // remove the class
    element.classList.remove('active');
  }
  else {
    // add the class
    element.classList.add('active');
  }
}

▶ Cobalah

Mari kita lihat contoh cara kedua

Contoh

function addRemoveClass() {
  // selecting the element
  let element = document.getElementById('box');

  // toggle the class
  element.classList.toggle('active');
}

▶ Cobalah

Kesimpulan

Kami telah melihat 2 cara bagaimana javascript menghapus kelas. Juga, kami telah melihat cara menghapus kelas dari beberapa kelas dan cara menghapus kelas jika ada