Hapus div dan isinya javascript

Dapatkan referensi DOM dari elemen HTML yang ingin Anda hapus dari halaman HTML dan panggil remove() di atasnya

Mari kita lihat itu beraksi

Berikut adalah Markup HTML sederhana

<section id="box-wrapper">
  <div class="box">div <br>1</div>
  <div class="box">div <br>2</div>
  <div class="box orange">div <br>3</div>
  <div class="box">div <br>4</div>
  <div class="box">div <br>5</div>
</section>

Mari hapus kotak oranye menggunakan metode remove()

Pertama, dapatkan referensi DOM dari semua elemen div yang memiliki kelas kotak di dalamnya dengan memanggil metode getElementsByClassName() pada objek dokumen

Ini akan mengembalikan HTMLCollection yang merupakan objek seperti array

Tetapkan ke kotak konstanta

Dapatkan kotak oranye dengan nilai indeksnya, yaitu 2 dalam kasus ini

Terakhir, panggil metode remove() pada objek elemen div yang akan menghapus dirinya sendiri dari hierarki DOM

const boxes = document.getElementsByClassName("box");
boxes[2].remove(); 

Menghapus elemen HTML dengan nomor indeks tidak selalu ideal

Terkadang, Anda perlu menghapus kotak oranye secara dinamis

Untungnya, kita dapat mengulangi objek HTMLCollection menggunakan for. dari lingkaran

Kemudian, temukan elemen mana yang memiliki kelas orange di dalamnya dan hapus

for(box of boxes) {
  if(box.classList.contains("orange")) {
    box.remove();
  }
}

Cobalah

Lihat Pen JavaScript Remove Element oleh SoftAuthor (@softauthor) di CodePen

2. Hapus Elemen HTML Anak Menggunakan removeChild()

Metode removeChild() memungkinkan Anda menghapus elemen HTML anak apa pun dari induknya

Pertama, dapatkan referensi DOM dari elemen induk (section#box-wrapper) dengan memanggil metode getElementById() pada objek dokumen

const boxWrapper = document.getElementById("box-wrapper");
const orangeBox = boxWrapper.getElementsByClassName("box")[2];
boxWrapper.removeChild(orangeBox); 

Kemudian, dapatkan referensi DOM dari orangeBox yang ingin kita hapus

Terakhir, panggil metode removeChild() pada objek elemen induk, yaitu boxWrapper, dengan meneruskan elemen anak orangeBox sebagai argumen

Cobalah

Lihat Pen JavaScript Remove Element Menggunakan remove() #2 oleh SoftAuthor (@softauthor) di CodePen

3. Hapus Semua Elemen HTML Anak Menggunakan replaceChildren()

Metode replaceChildren() memungkinkan Anda menghapus semua elemen anak dari elemen induk tertentu

Dapatkan referensi DOM dari elemen induk yang ingin Anda hapus semua turunannya

const boxWrapper = document.getElementById("box-wrapper");
boxWrapper.replaceChildren();

Kemudian, aktifkan metode replaceChildren() pada objek elemen induk (boxWrapper) yang menghilangkan semua elemen anak di dalamnya

Cobalah

Lihat Pena JavaScript Hapus Semua Elemen Anak Menggunakan replaceChildren() #3 oleh SoftAuthor (@softauthor) di CodePen

4. Hapus Atribut Menggunakan removeAttribute()

Pelajari cara menghapus atribut elemen HTML menggunakan metode removeAttribute()

Dapatkan referensi DOM dari semua elemen div yang memiliki kelas kotak di dalamnya dan simpan di konstanta kotak

const boxes = document.getElementsByClassName("box");
boxes[2].removeAttribute("class"); 

Panggil removeAttribute() pada elemen HTML yang memiliki kelas oranye di dalamnya menggunakan nilai indeks 2

Kemudian, berikan nama atribut yang ingin Anda singkirkan

Pada kasus ini. kelas

Seperti yang Anda lihat, removeAttribute() akan membuang semua kelas yang dilampirkan ke kotak 3

Bagaimana jika kita ingin menghapus hanya kelas oranye tetapi mempertahankan kelas kotak

Kita dapat dengan mudah melakukannya dengan memanggil metode remove() pada classList yang hanya akan menghapus nama kelas yang ditentukan dalam argumen

Mirip dengan .empty(), metode .remove() mengambil elemen dari DOM. Gunakan .remove()_ saat Anda ingin menghapus elemen itu sendiri, serta semua yang ada di dalamnya. Selain elemen itu sendiri, semua kejadian terikat dan data jQuery yang terkait dengan elemen akan dihapus. Untuk menghapus elemen tanpa menghapus data dan acara, gunakan

$( ".hello" ).remove();

Perhatikan HTML berikut

1

2

3

4

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Kami dapat menargetkan elemen apa pun untuk dihapus

1

$( ".hello" ).remove();

Ini akan menghasilkan struktur DOM dengan elemen

$( ".hello" ).remove();

1

2

3

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

Jika kita memiliki sejumlah elemen bersarang di dalam

$( ".hello" ).remove();

Kami juga dapat menyertakan pemilih sebagai parameter opsional. Misalnya, kita dapat menulis ulang kode penghapusan DOM sebelumnya sebagai berikut

Bagaimana cara menghapus konten div menggunakan JavaScript?

Bagaimana cara menghapus konten div?

Bagaimana cara menghapus div secara dinamis di JavaScript?

Bagaimana cara menonaktifkan semua konten div di JavaScript?

Bagaimana cara menambah dan menghapus div di JavaScript?