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/

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

Answer 2

HTML代码应如下所示：

<ul id="list">
  <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>

这是javascript：

var items = document.getElementById('list').children;
var remCount = 0;
for (var i = 0; i < items.length; i++) {
  var json = items[i].getAttribute('data-gt');
  try {
    var data = eval('(' + json + ')');
    if (data.type === 'hello') {
      items[i].parentNode.removeChild(items[i]);
      remCount++;
     }
  } catch(e) {

  }
}
console.log('Removed ' + remCount + ' elements');

这适用于所有浏览器

修改

最好使用JSON.parse(json)代替eval('(' + json + ')')，但它在IE7中不起作用

通过特定数据-gt删除li子项

2 个答案: