jQuery-如何将目标只是一个清单项目删除
问题描述:
我有一个待办事项列表,我遇到问题删除单个行项目时删除按钮被按下。用我目前的代码,它只会删除实际的删除按钮而不是列表项。任何帮助表示赞赏,谢谢。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
}); //end
body {
\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>
答
如果省略单击处理过滤器,你可以根据被点击了什么元素定义了不同的行为。在这种情况下,删除按钮会执行删除操作,单击该行项目将切换完成状态(将其从列表中删除)。
给定一个用于删除按钮元素的选择器,可以使用.closest("li")
来定位和删除父元素LI
。
$(document).ready(function() {
//Declare variables
var $newItem = $('#newItem');
var $addBtn = $('#addBtn');
var $textField = $('#textField');
var $textAddForm = $('#textAddForm');
var $wrapper = $('#wrapper');
var $list = $('ul');
var $glyph = $('.glyphicon')
//hide the Add form until it's needed and put focus on newItem
$textAddForm.hide();
$newItem.focus();
//hide draggable tooltip on mouseover
$wrapper.mouseover(function() {
$('#draggable').fadeOut(1000);
});
//Make the list draggable
$wrapper.draggable();
$wrapper.resizable();
//Hides the newItem button and adds the text field and add button
$newItem.on('click', function() {
$newItem.hide();
$textAddForm.show();
$textField.focus();
});
//Grabs the submission from Add Item
$textAddForm.on('submit', function(e) {
var grabText = $textField.val();
var $listItems = $('#listItems ul');
//disables page from submitting and appends the text to list
e.preventDefault();
$listItems.prepend('<li>' + grabText + '<span class="hidden glyphicon glyphicon-remove-sign"></span></li>');
//After inserting item, hides it and re-enable the New Item button
$newItem.show();
$textAddForm.hide();
$textField.val('');
$newItem.focus();
});
//Toggle complete
$list.on('click', function(e) {
var $targ = $(e.target);
if ($targ.hasClass("glyphicon")) {
// remove button clicked
$targ.closest("li").remove();
} else if ($targ.is("li")) {
// toggle complete status of line
var copy = $targ.detach();
var hasComplete = $targ.hasClass('complete');
$targ.toggleClass('complete').remove();
if (hasComplete) {
copy.prependTo('ul');
} else {
$targ.remove();
copy.appendTo('ul');
}
}
});
//show Delete button on mouseover and remove if it's pressed
$list.on('mouseenter mouseleave', 'li', function() {
var $this = $(this);
var $thisitem = $this.html();
console.log($thisitem);
$('.glyphicon', this).toggleClass('hidden');
$glyph.on('click', function() {
$thisitem.remove();
});
});
}); //end
body {
text-align: center;
}
ul {
list-style-type: none;
background: orange;
}
h1,
h2,
li {
font-family: 'Indie Flower', cursive;
}
p {
font-family: 'Cabin', sans-serif;
font-size: 12px;
}
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
.glyphicon {
margin-right: 30px;
margin-top: 4px;
float: right;
}
.glyphicon:hover {
color: red;
}
.hidden {
visibility: hidden;
}
#logo {
margin-bottom: 30px;
}
#logo h1 {
margin: 0;
padding-bottom: 0;
}
#logo p {
margin: 0;
}
#wrapper {
border-style: solid;
width: 340px;
overflow: hidden;
margin: auto auto;
}
#newItem {
float: right;
margin-right: 20px;
margin-bottom: 20px;
}
#textField {
float: left;
margin-left: 20px;
}
#listItems {
margin-bottom: 30px;
text-align: left;
font-size: 22px;
}
.complete {
text-decoration: line-through;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>The little to do</title>
<meta carset="utf-8" />
<!-- Summon Fonts & Library-->
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body>
<div id="draggable">
<p>I'm draggable!</p>
</div>
<div id="wrapper">
<div id="logo">
<h1>Project Bacon</h1>
<p>The Electronic Shopping List</p>
</div>
<!--end logo-->
<div id="listTitle">
<h2>BUY GROCERIES</h2>
<div id="listItems">
<ul>
</ul>
</div>
<!--end listItems-->
<form id="textAddForm">
<div>
<input id="textField" type="text" name="entry" placeholder="Add item...">
</div>
<div id="addBtn">
<input type="submit" name="addBtn" value="Add" type="button">
</div>
</form>
<!--end textAddForm-->
<div id="newItemForm">
<button id="newItem" type="button">New Item</button>
</div>
<!--end newItemForm-->
</div>
<!--end listTitle-->
</div>
<!--end wrapper-->
<!--Summon JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
+0
非常感谢您向我介绍event.target和最接近的电话。我只是读了event.target和$ this之间的区别,并不知道它存在,并且对我将来非常有用。 – tangoworks
答
我不知道,如果你彻底解释的功能,似乎现在,当它已经完成行项目只能有移除选项(透)。看来问题是,你正在运行删除然后重新前面加上这里这条线的元素列表:
if (hasComplete === true) {
$this.remove();
//copy.prependTo('ul');
}
通过它的工作原理前置注释掉我的理解功能:
'else { \t \t \t $ this.remove(); \t \t \t copy.appendTo('ul'); \t \t}'在$ this.remove()上应用断点反映了你想要的结果,然后声明撤消你想要的行为。如果这给你任何线索。 – Rikin