javascript - 删除所有没有属性的元素

Question

我试图了解如何删除所有没有指定属性的子元素，例如:

这是 html:

<div class="container">
  <span></span>
  <div></div>
  <strong data-*></strong>
  <p></p>
  <div data-*></div>
</div>

我想要的是删除容器内所有没有data-* 属性的元素。

数据-*

该属性可以是data-anything(数据颜色、数据边框等)。

我正在寻找仅限 JavaScript 的解决方案。

Answer 1

使用 .filter()、.some() 和 .forEach() 应该可以解决问题。

var els = document.querySelectorAll(".container *");

[].filter.call(els, function(el) {
    return ![].some.call(el.attributes, function(attr) {
        return /^data/i.test(attr.name);
    });
}).forEach(function(el) {
    el.parentNode.removeChild(el);
});

---

您需要为旧浏览器打补丁，但您可能已经知道了。

---

如果像我一样，你喜欢可重用的函数:

var els = document.querySelectorAll(".container *");

[].filter.call(els, els_with_no_data)
  .forEach(remove_nodes);

---

function remove_nodes(el) {
    el.parentNode.removeChild(el);
}

function has_data_attrs(attr) {
    return /^data/i.test(attr.name);
}

function els_with_no_data(el) {
    return ![].some.call(el.attributes, has_data_attrs)
}

---

然后使用数组泛型(在支持的浏览器中，否则 polyfiilled):

var els = document.querySelectorAll(".container *");

Array.filter(els, els_with_no_data)
     .forEach(remove_nodes);

---

function remove_nodes(el) {
    el.parentNode.removeChild(el);
}

function has_data_attrs(attr) {
    return /^data/i.test(attr.name);
}

function els_with_no_data(el) {
    return !Array.some(el.attributes, has_data_attrs)
}