如果 ID 包含带有 vanilla Javascript 的特定文本字符串，则隐藏父元素

Question

我想隐藏一个父<tr>标记，其中孙<span>标记具有带有特定字符串的 ID。

假设我想检查 ID 中的字符串“test123”，例如

<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

通过部分 ID 在<tr>中查找<span> ，如果存在，则 select 父行并将其删除

 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>

看

• 属性选择器
• 元素.closest()
• ChildNode.remove()

---

上面找到了与您的条件匹配的第一个元素（ “id 属性包含” ）。 如果您想对所有匹配的<span>元素执行此操作，请使用

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

根据为什么 jQuery 或诸如 getElementById 之类的 DOM 方法找不到元素？ ，请确保您的代码在文档加载后运行。