javascript - 有没有更好的方法通过类名获取特定元素来修改元素？

Question

我正在尝试选择一个特定元素，以便我可以删除或更改该元素的内容。

例如，如果这是我的代码

<div class="container">
  <div class="box">
    <div class = "a"> OPTION 12 </div>
<div class="container">
  <div class="box">
    <div class = "b"> OPTION 78 </div>
</div>
<div class="container">
  <div class="box">
    <div class = "c"> OPTION 56 </div>
</div>
<div class="container">
  <div class="box">
    <div class = "d"> OPTION 90 </div>
</div>

如果在加载页面时随机呈现框的顺序，并且我想选择一个具有 OPTION 56 的 div 并删除包含该内容的整个节点，那么在它们呈现时处理此问题的最佳方法是什么随机出现在网页中？

我知道您可以使用 getElementsByClassName 及其索引删除子节点。是否有一种特定的方法可以在不使用 getElementsByClassName 方法的情况下访问节点/元素？

我已经尝试为所有的每个 div 类添加一个 id。

我想选择一个包含内容OPTION 56的父div并删除整个

<div class="container">
  <div class="box">
    <div class = "c"> OPTION 56 </div>
</div>

父节点。

提前致谢。

Answer 1

您始终可以将 div 的值放入数据属性中。

<div class="container">
    <div class="box">
        <div class="a" data-option="OPTION 12">OPTION 12</div>
    </div>
    <div class="box">
        <div class="c" data-option="OPTION 56">OPTION 56</div>
    </div>
</div>

而您的 javascript(或 jquery，如下面所用)将涉及

$('[data-option="OPTION 56"]').parent('.box').remove();