0

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>
4

2 に答える 2

1

Is() はブール値を返します。:checked セレクターを使用できます。次に、parent() を使用して、ショッピング アイテムの親全体を削除します。このフィドルを参照してください: http://jsfiddle.net/MKPcK/

var checkedstuff = $(this).closest('#outsideBox').find('.checkDone:checked').parent();
 checkedstuff.hide();
于 2013-08-14T21:41:46.883 に答える
0

試す：

$('.removeStuff').on('click', function() {
    $('#outsideBox').find('.checkDone:checked').closest('.appItem').remove();
});
于 2013-08-14T21:39:11.023 に答える