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及其索引删除childNodes。有没有不使用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();

Answer 2

您可以使用getElementById，然后使用

选择父节点。

document.getElementById('a').parent('.box').remove();

Answer 3

假设您事先不知道类名，而只知道要删除的innerText值，则可以执行以下操作来删除元素：

const removeMe = "OPTION 56";
const e = document.querySelectorAll('.container .box div');

e.forEach(e => (e.innerText === removeMe && e.remove()));

<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>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

使用jQuery的:contains selector对元素进行修饰，使其具有所需的文本：
$("div:contains('OPTION 56')")
（您可以通过在选择器中添加其父项来使其更加具体。）
使用jQuery的parent去找它的父母。
使用jQuery的remove删除“祖父”节点。

这是示例代码：

$("div.container > div.box > div:contains('OPTION 56')").parent().parent().remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class = "a"> OPTION 12 </div>
  </div>
</div>
<div class="container">
  <div class="box">
    <div class = "b"> OPTION 78 </div>
  </div>
</div>
<div class="container">
  <div class="box">
    <div class = "c"> OPTION 56 </div>
  </div>
</div>
<div class="container">
  <div class="box">
    <div class = "d"> OPTION 90 </div>
  </div>
</div>

Answer 5

我认为javascript中的此解决方案可以解决您的问题。你有这种结构

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

我已将ID options-container 赋予父div。然后应用此解决方案

var options = document.getElementById('options-container');
              var childElements = options.childNodes;
               childElements.forEach(function(child) {
                  if((child.innerText) === "OPTION 56") {
                     child.remove();
                  }
              });

它会动态删除每个值 OPTION 56 的子级。希望对您有所帮助；）

是否有更好的方法通过类名来获取特定元素以修改元素？

5 个答案: