我想将不同的项目添加到列表中，然后使用“单击”事件删除每个项目。但是，下面的代码片段只允许我删除那些预设项目，但不允许我删除那些我添加的项目。谁能告诉我我做错了什么？
HTML
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/form.js"></script>
jQuery
$(function() {
var $newItemButton = $('#newItemButton');
var $newItemForm = $('#newItemForm');
var $textInput = $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e){
e.preventDefault();
var newText = $textInput.val();
$('li:last').after('<li>' + newText + '</li>');
$('li:last').attr('class','hot');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('');
});
var $listItems = $('li');
$listItems.on('click', function(){
$(this).animate({
opacity: 0.0,
paddingLeft: 50
}, 500, function(){
$(this).remove();
});
});
});
最佳答案
请检查下面的代码片段
$(function() {
var $newItemButton = $('#newItemButton');
var $newItemForm = $('#newItemForm');
var $textInput = $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e){
e.preventDefault();
var newText = $textInput.val();
$('li:last').after('<li>' + newText + '</li>');
$('li:last').attr('class','hot');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('');
});
});
$(document).ready(function(){
$("#page").on("click","li",function(){
$(this).animate({
opacity: 0.0,
paddingLeft: 50
}, 500, function(){
$(this).remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>关于javascript - jQuery - 删除列表中的项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43603287/