单击span元素时如何隐藏列表项

时间：2017-02-18 15:16:18

标签： javascript jquery html css event-handling

单击列表项中的范围时隐藏列表项的最佳方法是什么。我已经包含了以下代码。我正在尝试构建一个待办事项列表应用程序，并且我试图编写一个脚本来删除/隐藏当用户点击红色＆＃34时从结果列表中完成的任务; X＆＃34;文本。

＆＃13;
＆＃13; 
	
	var submitTask = $("#display-taskList");
	var taskList = $("#taskList");
	var submitTask = $("#submit-task");
	var list = "<li>" + inputTask + "</li>"
		var inputTask = $("#inputTask").val();

		submitTask.click(function(event) {
		event.preventDefault();
		var inputTask = $("#inputTask").val();
		var list = "<li>" + inputTask + "</li>"

			if (inputTask === "") {
				alert("Add a task")
			}

			else{
				$("ol").append("<li>" + $("#inputTask").val() + "<span id='close'>" + "x" +"</span>" + "</li>" );
			}


	});

		function doneTask(){
			var x = $('#listResult');
	 $(x).click(function(e) {
	 	if (e.target.tagName === 'SPAN'){
	 	var y =$("#close");
	 	var n = $(y).closest('li')
      return n.style.visibility = "hidden";
	 };
		});
	}

	doneTask();
＆＃13; 
	html,body { height: 100%; margin: 0px; padding: 0px; }
		body{
			background: #F3904F; /* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
		}

		#center-block {
		    width:600px;
		    height: 100%;
		    padding:10px;
		    background: #F3904F; /* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		}

		#inputTask{
		width: 530px;
		height: 44px;
		margin-left: 30px;
		font: 16px arial,sans-serif;
    	line-height: 34px;
   		height: 34px !important;
   		margin-top: 20px;
   		margin-bottom: 25px
   		;
		}

		input[type=text]{
			background-color: #3B4371;
			font-family: 'Ubuntu', sans-serif;
		}

		input[type=text]:focus {
    	background-color: #fff;
    	font-family: 'Ubuntu', sans-serif;
    	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    	border: 3px solid #555;: 
		}

		#title{
		color: #fff;
		font-family: 'Ubuntu', sans-serif;
		text-transform: capitalize;
		}

		hr{
			width: 50;
		}

		button{
		margin-top: 10px;
		opacity: 0.5;
		cursor: default;
	    font-family: arial,sans-serif;
	    font-size: 15px;
	    font-weight: bold;
	    margin: 5px 30px 10px 30px;
	    min-width: 54px;
	    height: 30px;
	    padding: 0 16px;
	    text-align: center;
		}

		ol > li {
			color: #fff;
			font-family: sans-serif;
			font-size: 20px;
			background-color: #A9A9A9;
			margin-top: 5px;
			padding-left: 5px;
		}
		
		
		li:hover{
			background: #808080;
			cursor: pointer;
		}

		.strike{
			text-decoration: line-through;
		}

		#close{
			color: red;
			font-size: 30px;
		}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container" id="center-block">
<div class="row">
	<form>
		<h1 class="text-center" id="title">Simple to-Do list</h1>
		<hr width="50%">
		<input type="text" id="inputTask" name="" placeholder="Title...">
		<button id="submit-task">Hit Me!</button>
		<!-- <button id="submit-task">Clear List</button> -->
	
	
	<div id="display-taskList">
		<h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3> 
		<ol id="listResult"></ol>
		</div>
	    </form> 
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

解决此问题的一个好方法是将click事件绑定到每个span元素。如果用户单击它，则隐藏所单击的span元素的父级。

修改：如果您点击并添加新的todo，则会立即清除输入。

var submitTask = $("#display-taskList");
var taskList = $("#taskList");
var submitTask = $("#submit-task");
var list = "<li>" + inputTask + "</li>"
var inputTask = $("#inputTask").val();

submitTask.click(function(event) {
  event.preventDefault();
  var inputTask = $("#inputTask").val();
  var list = "<li>" + inputTask + "</li>"

  if (inputTask === "") {
    alert("Add a task")
  } else {
    $("ol").append("<li>" + $("#inputTask").val() + "<span id='close'>" + "x" + "</span>" + "</li>");
    $('#inputTask').val(null);
  }

  $('#listResult').find('span').click(function() {
    $(this).parent().hide();
  });

});
html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  background: #F3904F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #F3904F, #3B4371);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #F3904F, #3B4371);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#center-block {
  width: 600px;
  height: 100%;
  padding: 10px;
  background: #F3904F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #F3904F, #3B4371);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #F3904F, #3B4371);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#inputTask {
  width: 530px;
  height: 44px;
  margin-left: 30px;
  font: 16px arial, sans-serif;
  line-height: 34px;
  height: 34px !important;
  margin-top: 20px;
  margin-bottom: 25px;
}

input[type=text] {
  background-color: #3B4371;
  font-family: 'Ubuntu', sans-serif;
}

input[type=text]:focus {
  background-color: #fff;
  font-family: 'Ubuntu', sans-serif;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  border: 3px solid #555;
  :
}

#title {
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  text-transform: capitalize;
}

hr {
  width: 50;
}

button {
  margin-top: 10px;
  opacity: 0.5;
  cursor: default;
  font-family: arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin: 5px 30px 10px 30px;
  min-width: 54px;
  height: 30px;
  padding: 0 16px;
  text-align: center;
}

ol>li {
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
  background-color: #A9A9A9;
  margin-top: 5px;
  padding-left: 5px;
}

li:hover {
  background: #808080;
  cursor: pointer;
}

.strike {
  text-decoration: line-through;
}

#close {
  color: red;
  font-size: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>
  <div class="container" id="center-block">
    <div class="row">
      <form>
        <h1 class="text-center" id="title">Simple to-Do list</h1>
        <hr width="50%">
        <input type="text" id="inputTask" name="" placeholder="Title...">
        <button id="submit-task">Hit Me!</button>
        <!-- <button id="submit-task">Clear List</button> -->


        <div id="display-taskList">
          <h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3>
          <ol id="listResult"></ol>
        </div>
      </form>
    </div>
  </div>
</body>

答案 1 :(得分：0)

您可以使用以下方法：

  • 使用jquery .hide（）方法。  n.hide（）;
  • 使用jquery .css（＆＃34; display＆＃34;，＆＃34; none＆＃34;）方法  n.css（＆＃34; display＆＃34;，＆＃34; none＆＃34;）

答案 2 :(得分：0)

您可以尝试使用跨度中的类。

<span class="revovable">

$('.removable').on('click', function(){
    $(this).hide();
    //if you want to remove the element you can use this
    $(this).remove();
})

答案 3 :(得分：0)

你想使用Jquery css而不是样式。它允许您设置.css('key', 'value')

等属性

在这种情况下，我设置.css('display', 'none') 

	
	var submitTask = $("#display-taskList");
	var taskList = $("#taskList");
	var submitTask = $("#submit-task");
	var list = "<li>" + inputTask + "</li>"
		var inputTask = $("#inputTask").val();

		submitTask.click(function(event) {
		event.preventDefault();
		var inputTask = $("#inputTask").val();
		var list = "<li>" + inputTask + "</li>"

			if (inputTask === "") {
				alert("Add a task")
			}

			else{
				$("ol").append("<li>" + $("#inputTask").val() + "<span id='close'>" + "x" +"</span>" + "</li>" );
			}


	});

		function doneTask(){
			var x = $('#listResult');
	 $(x).click(function(e) {
	 	if (e.target.tagName === 'SPAN'){
      $(e.target).closest('li').css('display', 'none');
	 };
		});
	}

	doneTask();
			
	html,body { height: 100%; margin: 0px; padding: 0px; }
		body{
			background: #F3904F; /* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
		}

		#center-block {
		    width:600px;
		    height: 100%;
		    padding:10px;
		    background: #F3904F; /* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		}

		#inputTask{
		width: 530px;
		height: 44px;
		margin-left: 30px;
		font: 16px arial,sans-serif;
    	line-height: 34px;
   		height: 34px !important;
   		margin-top: 20px;
   		margin-bottom: 25px
   		;
		}

		input[type=text]{
			background-color: #3B4371;
			font-family: 'Ubuntu', sans-serif;
		}

		input[type=text]:focus {
    	background-color: #fff;
    	font-family: 'Ubuntu', sans-serif;
    	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    	border: 3px solid #555;: 
		}

		#title{
		color: #fff;
		font-family: 'Ubuntu', sans-serif;
		text-transform: capitalize;
		}

		hr{
			width: 50;
		}

		button{
		margin-top: 10px;
		opacity: 0.5;
		cursor: default;
	    font-family: arial,sans-serif;
	    font-size: 15px;
	    font-weight: bold;
	    margin: 5px 30px 10px 30px;
	    min-width: 54px;
	    height: 30px;
	    padding: 0 16px;
	    text-align: center;
		}

		ol > li {
			color: #fff;
			font-family: sans-serif;
			font-size: 20px;
			background-color: #A9A9A9;
			margin-top: 5px;
			padding-left: 5px;
		}
		
		
		li:hover{
			background: #808080;
			cursor: pointer;
		}

		.strike{
			text-decoration: line-through;
		}

		#close{
			color: red;
			font-size: 30px;
		}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container" id="center-block">
<div class="row">
	<form>
		<h1 class="text-center" id="title">Simple to-Do list</h1>
		<hr width="50%">
		<input type="text" id="inputTask" name="" placeholder="Title...">
		<button id="submit-task">Hit Me!</button>
		<!-- <button id="submit-task">Clear List</button> -->
	
	
	<div id="display-taskList">
		<h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3> 
		<ol id="listResult"></ol>
		</div>
	    </form> 
    </div>
  </div>
</body>

相关问题
最新问题