Question 334889 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to shorten the closest method for multiple classes that have the same names

The following process works for me, in regards to finding the correct parent. It is out of my control on the duplicated class names as shown below. But is there a shorter way to write the following in raw JavaScript?

var mvalues = document.querySelectorAll("[id*='undefinedundefined']");
mvalues.forEach((item) => {

//is there a shorter way to write this?
item.closest(".input-group").closest(".combobox-container").closest(".input-group").closest(".combobox-container").remove();

});

The html looks like this…


<div class="combobox-container">
  <div class="input-group">
    <div class="combobox-container">
      <div class="input-group">
        <span id="itemundefinedundefined"></span>
      </div>
     </div>
   </div>
</div>
Tags:

3

Answers


  1. 0

    You could use the :has() selector.

    Keep in mind that this is relatively newer.

    const mVals = document.querySelectorAll("[id*='undefinedundefined']");

// Remove all .col-3 that match
mVals.forEach((el) => {
  el.closest('.col-3:has(.combobox-container)').remove();

  // OR...
  // el.closest('.col-3 > .combobox-container:has(.input-group)')?.parentElement.remove();
});
    <div class="col-3">
  <div class="combobox-container">
    <div class="input-group">
      <div class="combobox-container">
        <div class="input-group">
          <span id="itemundefinedundefined">FOO</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-3">
  <div class="combobox-container">
    <div class="input-group">
      <div class="combobox-container">
        <div class="input-group">
          <span id="item-keep">BAR</span>
        </div>
      </div>
    </div>
  </div>
</div>

    If you want to keep the parent column:

    // Remove .combobox-container
mVals.forEach((el) => {
  el.closest('.col-3 > .combobox-container:has(.input-group)').remove();
});
    Login or Signup to reply.
  2. 0

    Assuming that span really is using an id and not a class, and assuming the structure of your HTML is consistent and something like this:

    <div class="combobox-container">
  <div class="input-group">
    <div class="combobox-container">
      <div class="input-group">
        <span id="itemundefinedundefined">Part of the thing that you want to remove</span>
      </div>
     </div>
   </div>
</div>
<div class="combobox-container">
  <div class="input-group">
    <div class="combobox-container">
      <div class="input-group">
        <span id="anotherId">something else</span>
      </div>
     </div>
   </div>
</div>

    You could write the JS shorter in this way:

    var myItem = document.getElementById("itemundefinedundefined");
myItem.parentElement.parentElement.parentElement.parentElement.remove();

    or even shorter:

    var myItem = document.getElementById("itemundefinedundefined");
myItem.closest(".combobox-container").remove();

    It just depends on what limitations you’re running into (which parts of the code you can control vs what you cannot).

    Login or Signup to reply.
  3. 0

    If I understood correctly you want the farthest element matching the selector. jQuery offers closest, but not farthest. But it’s simple to do it on your own: get all the parents, select the last.

    const getFarthest = ( $el, selector ) => {
 return $el.parents(selector).last();
}

const $el = $('#itemundefinedundefined');
const $farthest = getFarthest($el, '.combobox-container');

$farthest.css('border-color', 'red')
    .combobox-container {
  padding: 1rem;
  border: 1px solid;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="combobox-container">
  <div class="input-group">
    <div class="combobox-container">
      <div class="input-group">
        <span id="itemundefinedundefined"></span>
      </div>
     </div>
   </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search