我正在尝试选择一个特定的元素,以便可以删除或更改该元素的内容。
例如,如果这是我的代码
<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>
父节点。
谢谢。
答案 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)
$("div:contains('OPTION 56')")
这是示例代码:
$("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 的子级。 希望对您有所帮助;)