如何对具有相同值的元素进行排序

Question

For example:

<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>

I want to keep only those divs whose data-key attribute is "key1", other ones should be removed. I don't know how to start. I think I should use append to "aphaOrder" but... Sorry for bad English...

Answer 1

 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>

Answer 2

Select all the divs and look at the sata attribute. If it is not the one you want, remove it.

 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>

---

What I first thought you wanted was to sort all the elements....

1. So you select the elements
2. Convert it to an array
3. Compare the data attribute, if same sort text
4. If data attribute different sort by data attribute
5. Append the elements back into the document.

 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>

Answer 3

Looks like you're not trying to sort, but to filter, keeping only the other ones. You can select all the matching elements and then delete them:

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

for (const element of elementsToRemove) {
  element.parent.removeChild(element);
}