Saya menerapkan fungsi di mana setiap elemen anak memiliki tombol yang menghapus elemen itu dari DOM. Ketika hanya ada satu elemen yang tersisa, saya membutuhkannya untuk menghapus induknya juga.

Masalahnya adalah bahwa induk terkadang memiliki elemen sebelum dan sesudah ada, jadi pemeriksaan harus memperhitungkannya dan mungkin harus didasarkan pada jenis elemen yang saya cari, yaitu div.

Jadi saya pada dasarnya mengejar div:only-of-type tetapi versi javascript, bukan jquery.

Saya membayangkan sesuatu seperti ini:

if (target.parentNode.onlyOfType()) {
    //do seomthing
}
0
bewww 28 Oktober 2019, 16:48

1 menjawab

Jawaban Terbaik

Anda dapat memeriksa panjang children dari parentNode berdasarkan mana Anda dapat menghapus elemen induk dari elemen yang ditargetkan.

Demo:

var btns = document.querySelectorAll('.myClass');
Array.from(btns).forEach(function(b){
  b.addEventListener('click', function(target){
    if (this.parentNode.children.length == 1) {
      this.parentNode.remove();
    }
    else alert('Has other child, can not be deleted');
  })
});
<div class="">Container 1
  <button type="button" class="myClass">Delete</button>
  <label>Some Other</label>
</div>
<div class="">Container 2
  <button type="button" class="myClass">Delete</button>
</div>
<div class="">Container 3
  <label>Some Other</label>
  <button type="button" class="myClass">Delete</button>
</div>

Jika ingin mengecek tipenya maka bisa menggunakan querySelectorAll() seperti cara berikut:

var btns = document.querySelectorAll('.myClass');
Array.from(btns).forEach(function(b){
  b.addEventListener('click', function(){
    var type = this.type;
    if (this.parentNode.querySelectorAll(type).length == 1) {
      this.parentNode.remove();
    }
    else alert('Has other child with same type, can not be deleted');
  })
});
<div class="">Container 1
  <button type="button" class="myClass">Delete</button>
  <label>Some Other</label>
</div>
<div class="">Container 2
  <button type="button" class="myClass">Delete</button>
</div>
<div class="">Container 3
  <label>Some Other</label>
  <button type="button" class="myClass">Delete</button>
  <button type="button" class="myClass">Edit</button>
</div>
0
Mamun 28 Oktober 2019, 14:17