Cara Menghapus Class Pada Sebuah Elemen

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 23, 2021

Di bawah ini kita akan mempelajari cara menghapus nama kelas dari elemen dengan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: brown;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Klik tombol di bawah ini untuk menghapus kelas "mystyle" dari elemen DIV:</p>

<button onclick="myFunction()">Tekan Di sini</button>

<div id="myDIV" class="mystyle">
Elemen div ini akan dihapus.
</div>

<script>
function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.remove("mystyle");
}
</script>

</body>
</html>

Hapus Class

Langkah 1) Tambahkan HTML:
Dalam contoh ini, kita akan menggunakan tombol untuk menghapus kelas “mystyle” dari elemen <div> dengan id = “myDIV”:
Contoh

<button onclick="myFunction()">Tekan Di sini</button>

<div id="myDIV" class="mystyle">
Elemen div ini akan dihapus.
</div>

Langkah 2) Tambahkan CSS:
Style pada nama kelas yang ditentukan:
Contoh

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: brown;
  color: white;
  font-size: 25px;
}

Langkah 3) Tambahkan JavaScript:
Dapatkan elemen <div> dengan id = “myDIV” dan hapus kelas “mystyle” darinya:
Contoh

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.remove("mystyle");
}

Solusi lintas browser

Catatan: Properti classList tidak didukung di Internet Explorer 9. Kode berikut akan berfungsi di semua browser:

Contoh

function myFunction() {
  var element = document.getElementById("myDIV");
  element.className = element.className.replace(/\bmystyle\b/g, "");
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: blue;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Klik tombol "Coba" untuk menghapus kelas "mystyle" dari elemen DIV:</p>

<button onclick="myFunction()">Coba Tekan Di Sini</button>

<div id="myDIV" class="mystyle">
Elemen div ini akan disembunyikan.
</div>

<script>
function myFunction() {
  var element = document.getElementById("myDIV");
  element.className = element.className.replace(/\bmystyle\b/g, "");
}
</script>

</body>
</html>