Hide a parent element if ID contains specific text string with vanilla Javascript

Question

I'm wanting to hide a parent <tr> tag where a grandchild <span> tag has an ID with a specific string.

Let's say I want to check for the string "test123" in the ID, e.g.

<table>
  <tr id="this_is_a_test456">
    <td>
      <span>
        <span>

        <span>
      </span>
    </td>
  </tr>
  <tr> <<<--- THIS ROW SHOULD BE DELETED
    <td>
      <span>
        <span id="this_is_a_test123">

        <span>
      </span>
    </td>
  </tr>
</table>

Answer 1

Find the <span> within a <tr> by partial ID and if it exists, select the parent row and remove it

let idPartial = 'test123'
let span = document.querySelector(`tr span[id*="${idPartial}"]`)
if (span) {
  span.closest('tr').remove()
}

<table border="1">
  <tr id="this_is_a_test456">
    <td>
      <span>
        <span>My row stays<span>
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>
        <span id="this_is_a_test123">My row goes<span>
      </span>
    </td>
  </tr>
</table>

See

• Attribute selectors
• Element.closest()
• ChildNode.remove()

---

The above finds the first element matching your condition ("id attribute contains"). If you wanted to do this for all matching <span> elements, use

let idPartial = 'test123'
document.querySelectorAll(`tr span[id*="${idPartial}"]`).forEach(span => {
  span.closest('tr').remove()
})

As per Why does jQuery or a DOM method such as getElementById not find the element?, make sure your code runs after the document has loaded.