Question

我似乎无法弄清楚如何使用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();

});
});

这是我的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>

Answer 1

Is（）返回一个布尔值。您可以使用：checked选择器。然后使用parent（）删除购物项的整个父项。看到这个小提琴：http://jsfiddle.net/MKPcK/

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

Answer 2

尝试：

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

尝试使用jquery删除特定的已检查元素

2 个答案: