CODEWITHSUNDEEP
javascripthtml
GAD
GAD

Reputation: 13

Remove li child by a specific data-gt

Ok I have this HTML code:

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

I want to delete all li tags containing "type":"hello". And I want to be counted all deleted tags, in a var. PS: I can't change HTML code.

We looked everywhere, but fail, if possible in JavaScript. (not jQuery). Thanks for your time.

Upvotes: 0

Views: 455

Answers (2)

Oleg
Oleg

Reputation: 23277

The HTML code should look like this:

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

And here is 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');

This should work in all browsers

Edit

It's better to use JSON.parse(json) instead of eval('(' + json + ')'), but it doesn't work in IE7

Upvotes: 0

Todd Motto
Todd Motto

Reputation: 913

You need to correct the HTML tags, and then filter your Nodes and parse the 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/

This code parses your data-attribute and then checks the object value. This is going to be far more accurate and extendable.

Upvotes: 3

Related Questions