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

时间:2019-04-10 18:19:05

标签: javascript jquery html

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

例如,如果这是我的代码

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

父节点。

谢谢。

5 个答案:

答案 0 :(得分:2)

您始终可以将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();   

答案 1 :(得分:0)

您可以使用getElementById,然后使用

选择父节点。
document.getElementById('a').parent('.box').remove();

答案 2 :(得分:0)

假设您事先不知道类名,而只知道要删除的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>

答案 3 :(得分:0)

  1. 使用jQuery的:contains selector对元素进行修饰,使其具有所需的文本:
    $("div:contains('OPTION 56')")
    (您可以通过在选择器中添加其父项来使其更加具体。)
  2. 使用jQuery的parent去找它的父母。
  3. 使用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>

答案 4 :(得分:0)

我认为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 的子级。 希望对您有所帮助;)