Javascript menghapus elemen berdasarkan kelas

Question

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

Table of Contents Show

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
11 Fitur JavaScript Baru yang Menakjubkan di ES13
Bagaimana cara menghapus elemen menggunakan kelas di JavaScript?
Bagaimana cara menghapus semua elemen dengan kelas yang sama di JavaScript?
Bagaimana cara menghapus elemen dari kelas dengan CSS?
Bagaimana Anda menghapus kelas tertentu dari semua 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 = '';
});

Semua kelas dari kolom input dihapus saat tombol diklik

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');
});

_

Semua kelas dihapus dari tombol saat tombol lain diklik.

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

Bagaimana cara menghapus elemen menggunakan kelas di JavaScript?

Metode hapus adalah fungsi sederhana yang dapat Anda gunakan untuk menghapus kelas dalam javascript. Yang perlu Anda lakukan hanyalah menentukan elemen yang ingin Anda hapus kelasnya. Setelah Anda menentukan elemen, Anda dapat memanggil fungsi hapus dari fungsi classList dari elemen yang dipilih .

Bagaimana cara menghapus semua elemen dengan kelas yang sama di JavaScript?

Metode “forEach()” dan “remove()” digabungkan dengan metode “querySelectorAll()” atau “Array. from()” dan “getElementsByClassName()” metode dapat digunakan untuk menghapus semua elemen dengan kelas tertentu menggunakan JavaScript.