user8431453 user8431453 - 1 month ago 11
jQuery Question

How do we convert jQuery remove class from parent in VanillaJS

I'm just trying to convert jQuery method to VanillaJS as below.

jQuery:

elements.parent(".item").removeClass("item");


Vanilla :

var parent = elements.parentNode;
parent.querySelector(".item").classList.remove('item');


But the Vanilla script is not working as same as jQuery. Someone please suggest any better solution.

Answer Source

Given that elements is plural, I'm assuming it's a collection, so use .forEach(). (This needs to be patched in legacy browsers unless elements is an actual Array)

elements.forEach(function(el) {
  el.parentNode.classList.remove("item");
});

Note that you do not need to filter down to just the .item elements. If it doesn't have the class, it'll be a no-op.

Also note that .querySelector only searches for descendants. If you did need to filter on the class for other reasons, you'd use .matches.

elements.forEach(function(el) {
  var par = el.parentNode;
  if (par.matches(".item")) {
    // Do work with the `.item` element
    par.classList.remove("item");
  }
});

If there could be multiple ancestors with the .item class, then traverse those ancestors in a nested loop.

elements.forEach(function(el) {
  var par = el.parentNode;
  do {
    if (par.matches(".item")) {
      // Do work with the `.item` element
      par.classList.remove("item");
    }
  } while((par = par.parentNode));
});

You could make a helper function if you're doing this frequently.

function ancestors(el, filter) {
  var res = [];
  var par = el.parentNode;
  do {
    if (!filter || par.matches(filter)) {
      res.push(par);
    }
  } while((par = par.parentNode));

  return res;
} 

So then it's like this.

elements.forEach(function(el) {
  ancestors(el, ".item")
    .forEach(function(par) { par.classList.remove(".item"); });
});