javascript - 通过特定的 data-gt 删除 li 子项

Question

好的，我有这个 HTML 代码:

<ul>    
    <li data-gt="{'alert_id':11111,'type':'hello'}"></li>
    <li data-gt="{'alert_id':11111,'type':'bye'}"></li>
    <li data-gt="{'alert_id':11111,'type':'hello'}"></li>
    <li data-gt="{'alert_id':11111,'type':'bye'}"></li>
</ul>

我想删除所有包含 "type":"hello" 的 li 标签。我想在 var 中计算所有已删除的标签。 PS:我无法更改 HTML 代码。

我们到处寻找，但失败了，如果可能的话在 JavaScript 中。 (不是 jQuery)。感谢您抽出时间。

Answer 1

您需要更正 HTML 标记，然后过滤节点并解析 JSON:

var elems = document.querySelectorAll('[data-gt]');
var deletedNodes = 0;
for (var i = 0; i < elems.length; i++) {
    var self = elems[i];
    var attr = self.getAttribute('data-gt');
    var parseAttr = JSON.parse(attr);
    if (parseAttr.type === 'hello') {
        self.parentNode.removeChild(self);
        deletedNodes++;
    }
}

// log deleted nodes
console.log(deletedNodes); // 2

http://jsfiddle.net/toddmotto/tT8HW/

此代码解析您的数据属性，然后检查对象值。这将更加准确和可扩展。