从列表中删除项目jquery li

时间:2013-07-23 00:15:44

标签: jquery

这是一个简单的HTML“todo app”,我有一个文本输入,将在页面上显示该文本。每次输入文本并单击按钮时,都会出现一个新的“待办事项”。我希望能够删除待办事项并通过单击文本使其消失。

我让它工作的地方会删除整个但似乎无法让它在创建后删除个别li。

<!DOCTYPE html>

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script>

function myTask()
$('#btnName').click(function(){
    var text = $('#inputName').val();
    if(text.length){
        $('<li />', {html: text}).appendTo('ul.taskList')
    }
});

</script>

</head>

<body onload="myTask()">


<div id="container">My Todos</div>
<input type="test" id="inputName" />
<button id="btnName">Click me!</button>

<ul class="taskList"></ul>
<script>
    $("ul").click(function () {
    $(this).remove();
    });
</script>

</body>
</html>

1 个答案:

答案 0 :(得分:2)

定位实际的li

$(".tasklist").on("click", "li", function () {
    $(this).remove();
});