Sebagai contoh:

<div id="aphaOrder">
    <div class="value"  data-key="key1">olark</div>   
    <div class="value"  data-key="key1">snapengage</div> 
    <div class="value"  data-key="key1">helponclick</div>
    <div class="value"  data-key="key2">hangouts</div>
    <div class="value"  data-key="key2">atlass</div> 
    <div class="value"  data-key="key3">hipchat</div>   
    <div class="value"  data-key="key3">chat hip</div>
</div>

Saya hanya ingin menyimpan div yang atribut data-key adalah "key1", yang lain harus dihapus. Saya tidak tahu bagaimana memulainya. Saya pikir saya harus menggunakan append ke "aphaOrder" tapi ... Maaf untuk bahasa Inggris yang buruk ...

1
Nikola Marinov 4 Januari 2021, 22:40

3 jawaban

Jawaban Terbaik
const $mainContainer = document.getElementById('aphaOrder');
for (const nodeElement of $mainContainer.childNodes) {
  if (nodeElement.getAttribute && nodeElement.getAttribute('data-key') === 'key1') {
    $mainContainer.removeChild(nodeElement);
  }
}
<div id="aphaOrder">
    <div class="value"  data-key="key1">olark</div>   
    <div class="value"  data-key="key1">snapengage</div> 
    <div class="value"  data-key="key1">helponclick</div>
    <div class="value"  data-key="key2">hangouts</div>
    <div class="value"  data-key="key2">atlass</div> 
    <div class="value"  data-key="key3">hipchat</div>   
    <div class="value"  data-key="key3">chat hip</div>
</div>
2
Tal Rofe 4 Januari 2021, 19:51

Sepertinya Anda tidak mencoba mengurutkan, tetapi memfilter, hanya menyimpan yang lain. Anda dapat memilih semua elemen yang cocok dan kemudian menghapusnya:

const elementsToRemove = document.querySelectorAll("#aphaOrder > [data-key=key1]");

for (const element of elementsToRemove) {
  element.parent.removeChild(element);
}
0
Ian 4 Januari 2021, 19:49

Pilih semua div dan lihat atribut sata. Jika itu bukan yang Anda inginkan, hapus.

document.querySelectorAll("#aphaOrder div").forEach(div => div.dataset.key!=="key1" && div.remove());
<div id="aphaOrder">
    <div class="value"  data-key="key1">olark</div>   
    <div class="value"  data-key="key1">snapengage</div> 
    <div class="value"  data-key="key1">helponclick</div>
    <div class="value"  data-key="key2">hangouts</div>
    <div class="value"  data-key="key2">atlass</div> 
    <div class="value"  data-key="key3">hipchat</div>   
    <div class="value"  data-key="key3">chat hip</div>
</div>

Apa yang pertama saya pikir Anda inginkan adalah menyortir semua elemen....

  1. Jadi Anda memilih elemen
  2. Ubah menjadi array
  3. Bandingkan atribut data, jika teks urutkan sama
  4. Jika atribut data berbeda, urutkan berdasarkan atribut data
  5. Tambahkan elemen kembali ke dalam dokumen.
const wrapper = document.querySelector("#aphaOrder");
const divs = Array.from(document.querySelectorAll("#aphaOrder div"));

divs.sort((a,b) => {
  const aKey = a.dataset.key;
  const bKey = b.dataset.key;
  if ( aKey === bKey) {
    return a.textContent.localeCompare(b.textContent);
  } 
  return aKey.localeCompare(bKey);
});

divs.forEach(div => wrapper.appendChild(div));
<div id="aphaOrder">
    <div class="value"  data-key="key1">olark</div>   
    <div class="value"  data-key="key1">snapengage</div> 
    <div class="value"  data-key="key1">helponclick</div>
    <div class="value"  data-key="key2">hangouts</div>
    <div class="value"  data-key="key2">atlass</div> 
    <div class="value"  data-key="key3">hipchat</div>   
    <div class="value"  data-key="key3">chat hip</div>
</div>
0
epascarello 4 Januari 2021, 20:01