jQuery-如何仅针对单个列表项目进行删除

时间：2016-05-16 01:33:33

标签： jquery

我有一个待办事项列表，我在按下删除按钮时删除单个订单项时遇到问题。使用我当前的代码，它只删除实际的删除按钮而不是列表项。感谢任何帮助，谢谢。

目标：将鼠标悬停在列表项上，然后按删除图标将其从列表中删除。

$(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', 'li', function(){
		var $this = $(this);
		var copy = $(this).detach();
		var hasComplete = $this.hasClass('complete');

		$this.toggleClass('complete');

		if (hasComplete === true) {
			$this.remove();
			copy.prependTo('ul');
		}
		else {
			$this.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;
}
<!doctype html>
<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>

2 个答案:

答案 0 :(得分：0)

如果省略单击处理程序的过滤器，则可以根据单击的元素定义不同的行为。在这种情况下，删除按钮执行删除，单击该行项将切换已完成的状态（将其从列表中删除）。

给定remove按钮元素的选择器，您可以使用.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>

答案 1 :(得分：-1)

我不确定你是否彻底解释了这个功能，现在似乎订单项在完成后只能有一个删除选项（通过）。看起来问题是你正在运行remove然后将元素重新添加到此行的列表中：

if (hasComplete === true) {
    $this.remove();
    //copy.prependTo('ul');
}

通过评论前置，它对我对功能的理解起作用：

https://jsfiddle.net/ac83xodj/

相关问题
最新问题