Cara menggunakan hapus semua elemen javascript

Question

Kami memberikan solusi yang mudah digunakan yang berfungsi untuk semua materi pemasaran Anda, termasuk katalog, brosur, laporan, proposal, dan lainnya. Manfaatkan opsi distribusi kami yang luas, dan potong biaya cetak saat Anda mengarahkan lebih banyak lalu lintas ke situs Anda dan menghasilkan peluang penjualan dengan brosur Anda

Contoh

Hapus elemen dari dokumen

Table of Contents Show

Definisi dan Penggunaan
Nilai Pengembalian
Dukungan Peramban
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

elemen const = dokumen. getElementById("demo");
elemen. menghapus();

Cobalah sendiri "

Definisi dan Penggunaan

Metode remove()_ menghapus elemen (atau simpul) dari dokumen

Sintaksis

atau

Parameter

Nilai Pengembalian

Dukungan Peramban

element.remove() adalah fitur DOM Living Standard

Itu didukung di semua browser modern

ChromeEdgeFirefoxSafariOperaYaYaYaYaYa

element.remove() tidak didukung di Internet Explorer 11 (atau lebih lama)

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

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

kode javascript