JavaScript, get elements with the same value of 'id' and other attribute

Question

I have a document which is rendered to a following structure:

<tr>
    <td>
        <div class="csLabel">
            <label for="common_id">Label</label>
        </div>
    </td>
    <td>
        <div class="csFields">
            <select id="common_id" name="someName">
                <option value="">some options...</option>
            </select>           
        </div>
    </td>
</tr>

There are many elements of such on a page and I want to hide only few of them. As you can see, there are two elements: a label and select. They both share the same value common_id but in label it is assigned to for attribute and in select it is id.

Is there a way to get all such elements that use the value common_id?

https://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery this can help — Arun Sudhakaran, Oct 01 '19 at 07:13

mplungjan · Accepted Answer · 2019-10-01T07:18:57.523

Have a try with this

If you want to just hide the row you only need the ID:

var id = "common_id2";
[...document.querySelectorAll("#"+id)].forEach(function(ele) {
  ele.closest("tr").style.display="none";
})

<table>
  <tbody>
    <tr>
      <td>
        <div class="csLabel">
          <label for="common_id1">Label</label>
        </div>
      </td>
      <td>
        <div class="csFields">
          <select id="common_id1" name="someName">
            <option value="">some options...</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="csLabel">
          <label for="common_id2">Label</label>
        </div>
      </td>
      <td>
        <div class="csFields">
          <select id="common_id2" name="someName">
            <option value="">some options...</option>
          </select>
        </div>
      </td>
    </tr>
  </tbody>
</table>

If the label and element are in different rows you need both ID and for=ID

var id = "common_id2";
[...document.querySelectorAll("#" + id + ", [for=" + id + "]")].forEach(function(ele) {
  ele.closest("tr").style.display = "none";
})

<table>
  <tbody>
    <tr>
      <td>
        <div class="csLabel">
          <label for="common_id1">Label</label>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="csFields">
          <select id="common_id1" name="someName">
            <option value="">some options...</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="csLabel">
          <label for="common_id2">Label</label>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="csFields">
          <select id="common_id2" name="someName">
            <option value="">some options...</option>
          </select>
        </div>
      </td>
    </tr>
  </tbody>
</table>

etoxin · Answer 2 · 2019-10-01T06:54:49.520

1

Maybe do this on load, then what you need to do later will be much easier.

const child = document.querySelectorAll('label[for="common_id1"]')

child.forEach(node => node.parentNode.parentNode.data('targetId', node.id))

edited Oct 01 '19 at 06:54

answered Oct 01 '19 at 06:49

etoxin

4,908
3
38
50

Why? What is the improvement? You can get at the parent from the ID and you can get at the for using the ID too – mplungjan Oct 01 '19 at 07:20
Also attributes should be lowercase – mplungjan Oct 04 '19 at 08:59

JavaScript, get elements with the same value of 'id' and other attribute

2 Answers2