Javascript 尝试使用jquery删除特定的选中元素_Javascript_Jquery_Checkbox

Javascript 尝试使用jquery删除特定的选中元素

javascript jquery checkbox

Javascript 尝试使用jquery删除特定的选中元素,javascript,jquery,checkbox,Javascript,Jquery,Checkbox,我似乎不知道如何使用jQuery删除元素。我正在创建一个示例购物清单应用程序，我可以根据需要添加项目，但我不知道如何删除选中的项目。我错过了什么 jQuery(document).ready(function() { $('.addStuff').on('click', function() { var htmlStr = '<div class = "appItem"> <div class = "priority"> Priority: <select>

我似乎不知道如何使用jQuery删除元素。我正在创建一个示例购物清单应用程序，我可以根据需要添加项目，但我不知道如何删除选中的项目。我错过了什么

 jQuery(document).ready(function() {
$('.addStuff').on('click', function() {
var htmlStr = '<div class = "appItem"> <div class = "priority"> Priority: <select> <option value="high"> High</option> <option value="medium"> Medium</option> <option value="low"> Low </option> </select> </div> Done: <input type = "checkbox" class = "checkDone" name = "status" value = "done" /> <br/> To do item: <input type ="text" class = "listItem"  name = "item" /> </div>';
$(this).closest('#outsideBox').append(htmlStr);
});

$('.removeStuff').on('click',function(){

 var checkedstuff = $(this).closest('#outsideBox').find('.checkDone').is(':checked');
 checkedstuff.hide();

});
});

jQuery（文档）.ready（函数（）{
$（'.addStuff'）。在（'click'，function（）上{
var htmlStr='优先级：高-中-低-已完成：
待完成项：'；
$（this）.closest（“#outsideBox”）.append（htmlStr）；
});
$（'.removeStuff'）。在（'click'，function（）上{
var checkedstuff=$（this）.closest（“#outsideBox”）.find（“.checkDone”）.is（“：checked”）；
checkedstuff.hide（）；
});
});

这是我的HTML：

<html >
<head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
        <title> ShopIt </title>
        <link rel="stylesheet" type = "text/css" href = "shoppapp.css" />
        <script src="jquery-1.9.1.min.js"></script>
        <script src="shopapp.js" type="text/javascript"></script>


</head>
<body>

    <h1> Shop It! </h1>
    <div id = "outsideBox">
        <div id = "functionButtons">
        <button class = "addStuff"> Add Item </button>
        <button class = "removeStuff"> Remove Checked Items </button>
        </div>
        <div class = "appItem">
            <div class = "priority">
            Priority: <select> 
                <option value="high"> High</option>
                <option value="medium"> Medium</option>
                <option value="low"> Low </option>
            </select>
            </div>

            Done: <input type = "checkbox" class = "checkDone" name = "status" value = "done" /><br/>
            To do item: <input type ="text" class = "listItem"  name = "item" />
        </div>
    </div>
<footer>
    <p> Thinful Project, Unit 3 </p>
</footer>
</body>
</html>


ShopIt
买吧！
添加项
删除选中的项目
优先：
高
中等
低
完成：

待办事项：
薄型项目，第3单元

试试：

Is（）返回一个布尔值。您可以使用：选中的选择器。然后使用parent（）删除购物项目的整个父项。看这把小提琴：

var checkedstuff=$（this）.closest（“#outsideBox”）.find（“.checkDone”）.is（“：checked”）

将返回一个

bool

，因为

.is（）

返回true或FALSE将

is

更改为

filter

，并针对正确的元素，这里有一些“工作”：。请注意，

$（this）.closest（“#outsideBox”）

是不必要的（这会导致jQuery做的工作比必要的多得多）-您可以只使用

$（“#outsideBox”）

，因为

id

属性应该是唯一的，这是有效的。我想一定是我错过了一些简单的东西。谢谢请记住，hide（）只会在元素上设置一个“display:none”，隐藏它，但它仍然会占用内存，它仍然会出现在DOM中，因此如果您希望删除它们（同时释放内存空间），请使用remove（）。很好，Nicolae。仅当您希望在之后显示（）或使用隐藏数据时才使用hide（）。我还建议您使用[…].find（'.checkDone:checked'）.closest（'.appItem'）来获取父div，因为如果您要在addStuff click处理程序中更改'htmlStr'，您的复选框将嵌套至少更深一层，[…]。查找（'.checkDone:checked'）.parent（）将无法按预期工作。但是……只要将“checkDone”复选框作为“appItem”的直接子项，代码就可以正常工作。。。

$('.removeStuff').on('click', function() {
    $('#outsideBox').find('.checkDone:checked').closest('.appItem').remove();
});

var checkedstuff = $(this).closest('#outsideBox').find('.checkDone:checked').parent();
 checkedstuff.hide();