CODEWITHSUNDEEP
javascripthtml
Greg Greg
Greg Greg

Reputation: 31

Remove <li> elements based on data attrribute on child

I have the following HTML:

<li><div class="abc"><a href="https://www.google.com" data-test="male">John</a></div></li>
<li><div class="abc"><a href="https://www.facebook.com" data-test="female">Maria</a></div></li>
<li><div class="abc"><a href="https://www.instagram" data-test="male">Peter</a></div></li>

What I'm trying to do is to completely remove/hide the two <li> that have data-test="male" value, without jquery. Any help/suggestion would help.

Upvotes: 3

Views: 236

Answers (4)

Siah
Siah

Reputation: 351

You can use the power of CSS selectors:

[].forEach.call(document.querySelectorAll('li a[data-test="male"]'), function(el) {
  el.parentNode.parentNode.remove();
});
<li>
  <div class="abc"><a href="https://www.google.com" data-test="male">John</a></div>
</li>
<li>
  <div class="abc"><a href="https://www.facebook.com" data-test="female">Maria</a></div>
</li>
<li>
  <div class="abc"><a href="https://www.instagram" data-test="male">Peter</a></div>
</li>

APIs used:

Upvotes: 3

razorxan
razorxan

Reputation: 516

This code should work on old browsers too

var els = document.getElementsByClassName('abc');
for (var i=0; i< els.length; i++){
    if (els[i].firstChild.getAttribute('data-test') === 'male') {
        els[i].parentNode.parentNode.removeChild(els[i].parentNode);
    }
}

Upvotes: 0

Ricky Ruiz
Ricky Ruiz

Reputation: 26771

You could use Element.closest.

The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.

Since this is still experimental make sure to check browser support here and the polyfill provided below in this answer.

How to use:

var el = element.closest(<[css selector]>);

Code Snippet:

(function() {
  var selectors = document.querySelectorAll('[data-test=male]'),
    i = 0,
    len = selectors.length;

  for (i, len; i < len; i++) {
    var current = selectors[i];
    current.closest('li').remove();
  }
})();
<li>
  <div class="abc"><a href="https://www.google.com" data-test="male">John</a></div>
</li>
<li>
  <div class="abc"><a href="https://www.facebook.com" data-test="female">Maria</a></div>
</li>
<li>
  <div class="abc"><a href="https://www.instagram" data-test="male">Peter</a></div>
</li>

For browsers that do not support this you can use the following polyfill provided by MDN:

if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest = 
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i,
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {};
        } while ((i < 0) && (el = el.parentElement)); 
        return el;
    };
}

Upvotes: 0

shuizhongyuemin
shuizhongyuemin

Reputation: 579

if you targets browser is all support querySelector. You can use 

{parentDom}.querySelector('a[data-test="male"]').parentNode.parentNode

to find the li you need.

The documents related:

  1. querySelector
  2. parentNode

Upvotes: 0

Related Questions