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

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>

超文本标记语言

其他团体

已选择

<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)删除复选框