gpt4 book ai didi

javascript - 删除包含 html 形式行的复选框

转载 作者:行者123 更新时间:2023-12-03 06:39:28 25 4
gpt4 key购买 nike

<script>
function delBoxes(){
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for(var i = 0; i<boxes.length; i++){
box = boxes[i];
txt = texts[i];
if(box.checked){
box.parentNode.removeChild(box);
txt.parentNode.removeChild(txt);
}
}
}
</script>
<html>  

<body>
<form action="" method="post">
<table border="1" id="table">
<tr> <td colspan="2">Select Technolgy:</td> </tr>
<tr> <td>c</td>
<td><input type="checkbox" name="techno[]" value="c" class='chk'></td>
</tr>
<tr> <td>hadoop</td>
<td><input type="checkbox" name="techno[]" value="hadoop" class = 'chk'></td>
</tr>
<tr> <td>core java</td>
<td><input type="checkbox" name="techno[]" value="Core JAVA" class='chk'></td>
</tr>

<input type="button" value="Click" id="btntest" />
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
</form>


</body>
</html>

使用此代码,我可以删除选中的复选框。但是如何删除表单中包含表格行的选中复选框?

我已通读 this question ,但这对我没有帮助。

最佳答案

编辑你的代码,你可以这样做

function delBoxes() {
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for (var i = 0; i < boxes.length; i++) {
box = boxes[i];
if (box.checked) {
rowTag = box.parentNode.parentNode;
tableTag = box.parentNode.parentNode.parentNode;
tableTag.removeChild(rowTag);
}
}
}

document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr>
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr>
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr>
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>

<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' />and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>

但是你必须考虑将设计更改为更好的东西。设置 id 或类并引用它们,而不是相对的“魔数(Magic Number)级别”。

如果您使用 data-tech 属性标记行,那么您可以执行以下操作:

    function delBoxes() {
var classname = document.getElementsByClassName("chk");
for (var i = 0; i < classname.length; i++) {
box = classname[i]
if (box.checked) {
elements = document.querySelectorAll('[data-tech="' + box.value + '"]');
elements[0].parentNode.removeChild(elements[0]);
}
}
}

document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr data-tech="c">
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr data-tech="hadoop">
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr data-tech="Core JAVA">
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>

<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' /> and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>

关于javascript - 删除包含 html 形式行的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38029043/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com