2
我有一个待办事项列表，我遇到问题删除单个行项目时删除按钮被按下。用我目前的代码，它只会删除实际的删除按钮而不是列表项。任何帮助表示赞赏，谢谢。jQuery-如何将目标只是一个清单项目删除
目标：将鼠标悬停在列表项上，然后按删除图标将其从列表中删除。
$(document).ready(function(){
\t //Declare variables
\t var $newItem = $('#newItem');
\t var $addBtn = $('#addBtn');
\t var $textField = $('#textField');
\t var $textAddForm = $('#textAddForm');
\t var $wrapper = $('#wrapper');
\t var $list = $('ul');
\t var $glyph = $('.glyphicon')
\t //hide the Add form until it's needed and put focus on newItem
\t $textAddForm.hide();
\t $newItem.focus();
\t //hide draggable tooltip on mouseover
\t $wrapper.mouseover(function() {
\t \t $('#draggable').fadeOut(1000);
\t });
\t //Make the list draggable
\t $wrapper.draggable();
\t $wrapper.resizable();
\t //Hides the newItem button and adds the text field and add button
\t $newItem.on('click', function(){
\t \t $newItem.hide();
\t \t $textAddForm.show();
\t \t $textField.focus();
\t });
\t //Grabs the submission from Add Item
\t $textAddForm.on('submit', function(e){
\t \t var grabText = $textField.val();
\t \t var $listItems = $('#listItems ul');
\t \t //disables page from submitting and appends the text to list
\t \t e.preventDefault();
\t \t $listItems.prepend('<li>' + grabText + '<span class="hidden glyphicon glyphicon-remove-sign"></span></li>');
\t \t //After inserting item, hides it and re-enable the New Item button
\t \t $newItem.show();
\t \t $textAddForm.hide();
\t \t $textField.val('');
\t \t $newItem.focus();
\t });
\t //Toggle complete
\t $list.on('click', 'li', function(){
\t \t var $this = $(this);
\t \t var copy = $(this).detach();
\t \t var hasComplete = $this.hasClass('complete');
\t \t $this.toggleClass('complete');
\t \t if (hasComplete === true) {
\t \t \t $this.remove();
\t \t \t copy.prependTo('ul');
\t \t }
\t \t else {
\t \t \t $this.remove();
\t \t \t copy.appendTo('ul');
\t \t }
\t });
\t //show Delete button on mouseover and remove if it's pressed
\t $list.on('mouseenter mouseleave', 'li' , function(){
\t \t var $this = $(this);
\t \t var $thisitem = $this.html();
\t \t console.log($thisitem);
\t \t $('.glyphicon', this).toggleClass('hidden');
\t \t $glyph.on('click', function(){
\t \t \t $thisitem.remove();
\t \t });
\t }); \t
}); //endbody {
\t text-align: center;
}
ul {
\t list-style-type: none;
\t background: orange;
}
h1, h2, li {
\t font-family: 'Indie Flower', cursive;
}
p {
\t font-family: 'Cabin', sans-serif;
\t font-size: 12px;
}
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
.glyphicon {
\t margin-right: 30px;
\t margin-top: 4px;
\t float: right;
}
.glyphicon:hover {
\t color: red;
}
.hidden {
\t visibility: hidden;
}
#logo {
\t margin-bottom: 30px;
}
#logo h1 {
\t margin: 0;
\t padding-bottom: 0;
}
#logo p {
\t margin: 0;
}
#wrapper {
\t border-style: solid;
\t width: 340px;
\t overflow: hidden;
\t margin: auto auto;
}
#newItem {
\t float: right;
\t margin-right: 20px;
\t margin-bottom: 20px;
}
#textField {
\t float: left;
\t margin-left: 20px;
}
#listItems {
\t margin-bottom: 30px;
\t text-align: left;
\t font-size: 22px;
}
.complete {
\t text-decoration: line-through;
}<!doctype html>
<html>
\t <head>
\t \t <link rel="stylesheet" href="style.css" />
\t \t <title>The little to do</title>
\t \t <meta carset="utf-8" />
\t \t <!-- Summon Fonts & Library-->
\t \t <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
\t \t <link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
\t \t <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
\t \t <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
\t </head>
\t <body>
\t <div id="draggable">
\t \t <p>I'm draggable!</p>
\t </div>
\t <div id="wrapper">
\t \t <div id="logo">
\t \t \t <h1>Project Bacon</h1>
\t \t \t <p>The Electronic Shopping List</p>
\t \t </div><!--end logo-->
\t \t <div id="listTitle">
\t \t \t <h2>BUY GROCERIES</h2>
\t \t \t <div id="listItems">
\t \t \t \t <ul>
\t \t \t \t </ul>
\t \t \t </div><!--end listItems-->
\t \t \t
\t \t \t <form id="textAddForm">
\t \t \t \t <div>
\t \t \t \t \t <input id="textField" type="text" name="entry" placeholder="Add item...">
\t \t \t \t </div>
\t \t \t \t <div id="addBtn">
\t \t \t \t \t <input type="submit" name="addBtn" value="Add" type="button">
\t \t \t \t </div>
\t \t \t </form><!--end textAddForm-->
\t \t \t <div id="newItemForm">
\t \t \t \t <button id="newItem" type="button">New Item</button>
\t \t \t </div><!--end newItemForm-->
\t \t </div><!--end listTitle-->
\t </div><!--end wrapper-->
\t <!--Summon JS-->
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
\t <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
\t <script type="text/javascript" src="script.js"></script>
\t </body>
</html>
'else { \t \t \t $ this.remove（）; \t \t \t copy.appendTo（'ul'）; \t \t}'在$ this.remove（）上应用断点反映了你想要的结果，然后声明撤消你想要的行为。如果这给你任何线索。 – Rikin