未选中时隐藏选中的复选框

Question

我有一个复选框，一个标签，一行上有一个文本字段。

[页面加载时，该复选框已被选中，如果用户取消了该复选框，我希望删除该行。并不是真正的显示/隐藏，因为我不需要重新显示未选中的复选框。

有快速的方法吗？我正在使用JQuery添加行，但是如果未选中，则希望删除行。我正在使用添加，所以我想我要“添加”复选框或行“添加”或“删除”。

<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});

$("#btn2").click(function(){
$("ul").append("<li><input type='checkbox' checked> Other Group 
&nbsp;<select><option>(HG) 1</option><option>(OG) 2</option>
<option>(OG) 3</option><option>(OG) 4</option><option>(OG) 
5</option></select> &nbsp;  <input type='text' name='fname' 
size='30'></li>");
});
});
</script>

HTML

其他组

已选择

<ul>
<li><input type="checkbox" id="vehicle1" name="vehicle1" 
value="Bike" checked>
<label for="vehicle1"> Rock Quarry Worker</label></li>
</ul>
<p>&nbsp;</p>
<style>
ul {

padding: 0;
list-style-type: none;
}
li {
    margin: 0 0 4px 0;
}
</style>

<p>Availble </p>
<form>
    <style>
        .space {li {
    margin: 0 0 4px 0;
}}
    </style>
<input type="checkbox" id="vehicle0" name="vehicle1" value="Bike" 
class="space"> <label for="vehicle1"> Row Boat Operator</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" 
class="space">
<label for="vehicle2"> Window Washer</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Zoo Keeper</label><br></form>
<p><button id="btn2" class="btn2">+</button> Add </p>


<p>&nbsp;</p>



<style>
    .btn2 {
        background-color: red;
        color:#FFF;
        font-size: 10pt;
        font-family:Impact, Haettenschweiler, "Franklin Gothic 
Bold", "Arial Black", "sans-serif";

        padding: 6px;

    }
</style>

Answer 1

您可以使用removeChild(yourCheckbox)删除您的复选框

Answer 2

使用js的一种解决方案是将onclick事件侦听器放置到您的复选框中，该事件监听器将调用名为myFunc()的函数，该函数将获取复选框的父元素，并从父元素获取removeChild(yourCheckbox)。这样，该复选框不仅消失了，而且还从HTML中删除了。

例如：

<input type="checkbox" id="checkBoxToRemove" onclick="myFunc()" />

然后在script标签内：

myFunc() {
var parent = document.getElementById('parentOfCheckBox'); // could use getElementsByClassName or Tag or whatever
var checkbox = document.getElementById('checkBoxToRemove');
parent.removeChild(checkbox);
}