如何进行选择删除与jQuery

Question

我对jQuery还是有点陌生​​。 我试图做这个项目很有趣： http : //jsbin.com/pevateli/2/

我想要的是，当您输入内容并将其添加到列表中时，您将能够选择它并单击右上角的图像进行删除。

JavaScript：

$(document).ready(function(){
    $("#button").click(function(){
        $(".del").slideDown(100);
        var toAdd = $('input[name=checkListItem]').val();
        $(".list").append("<div class='item'><input type='checkbox'/>" + toAdd + "</div>");
    });
});
$(document).on("click",".del",function(){
var rmv = $("input:checkbox:cheked").val();
    $(rmv).remove();
});

HTML：

<!DOCTYPE html>
<html>
<head>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <title>To Do</title>
    <link rel="stylesheet" type="text/css" href="a style.css"/>
    <script type="text/javascript" src="a script.js"></script>

</head>
<body>
    <h2>To Do</h2>
    <form name="checkListForm">
        <input type="text" name="checkListItem"/>
    </form>
    <img style="display:none;" class='del' src='del.png' align='right' width='20px'>    </img>
    <div id="button">Add!</div>
    <br/>
    <div class="list"></div>
</body>
</html>

CSS：

h2 {
    font-family:arial;
}

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height:20px;
    width:70px;
    background-color:#cc0000;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
}

.list {
    font-family:garamond;
    color:#cc0000;
}

再次，实时复制： http : //jsbin.com/pevateli/2/

Answer 1

您需要运行复选框，查看是否已选中它们，然后删除其容器：

$(document).on("click",".del",function(){
    $('.checkbox:checked').parents('.item').remove();
});

我将类checkbox添加到您的复选框，以将其用作选择器，而不使用input元素。 最好不要让JS逻辑依赖于DOM元素本身。

这是一个工作演示

Answer 2

http://jsbin.com/pevateli/3/

删除代码中出现了一些错误，如Ramy所说。 另外，他说您需要选择父项。 此更新的代码修复了该问题。

另外，我从$(document).on('#button', 'click', function() {});更改了事件$(document).on('#button', 'click', function() {}); 提交功能。 $(document).on('form', 'submit', function() {}); 并将div更改为按钮类型Submit。 这样，您可以按Enter键添加项目，也可以单击按钮。

我添加的另一件事是，删除提交时输入的值，这样，您不必在创建新项目之前删除先前的项目。

而且您知道什么会使它变得真正有趣吗？ localStorage();

Answer 3

var rmv = $("input:checkbox:checked").val()将检索输入的值，这没有帮助。

您正在寻找这个：

$(document).on("click", ".del", function () {
    // To be more precise use $('.item input:checked') or even $('.list input:checked') or put a class name on the checkboxes.
    $('input:checkbox:checked').closest('.item').remove();
});

一个人为的例子在这里： http : //jsfiddle.net/scottux/72ZxC/