1
单击列表项目内的span时隐藏列表项目的最佳方法是什么？我已经包含下面的代码。我正在尝试构建待办事项列表应用程序，并且我试图编写一个脚本，用于在用户单击红色“X”文本时删除/隐藏从结果列表中完成的任务。点击span元素时如何隐藏列表项目
\t
\t var submitTask = $("#display-taskList");
\t var taskList = $("#taskList");
\t var submitTask = $("#submit-task");
\t var list = "<li>" + inputTask + "</li>"
\t \t var inputTask = $("#inputTask").val();
\t \t submitTask.click(function(event) {
\t \t event.preventDefault();
\t \t var inputTask = $("#inputTask").val();
\t \t var list = "<li>" + inputTask + "</li>"
\t \t \t if (inputTask === "") {
\t \t \t \t alert("Add a task")
\t \t \t }
\t \t \t else{
\t \t \t \t $("ol").append("<li>" + $("#inputTask").val() + "<span id='close'>" + "x" +"</span>" + "</li>");
\t \t \t }
\t });
\t \t function doneTask(){
\t \t \t var x = $('#listResult');
\t $(x).click(function(e) {
\t \t if (e.target.tagName === 'SPAN'){
\t \t var y =$("#close");
\t \t var n = $(y).closest('li')
return n.style.visibility = "hidden";
\t };
\t \t });
\t }
\t doneTask();
\t \t \t\t html,body { height: 100%; margin: 0px; padding: 0px; }
\t \t body{
\t \t \t background: #F3904F; /* fallback for old browsers */
\t \t \t background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
\t \t \t background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
\t \t }
\t \t #center-block {
\t \t width:600px;
\t \t height: 100%;
\t \t padding:10px;
\t \t background: #F3904F; /* fallback for old browsers */
\t \t \t background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
\t \t \t background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
\t \t }
\t \t #inputTask{
\t \t width: 530px;
\t \t height: 44px;
\t \t margin-left: 30px;
\t \t font: 16px arial,sans-serif;
\t line-height: 34px;
\t \t height: 34px !important;
\t \t margin-top: 20px;
\t \t margin-bottom: 25px
\t \t ;
\t \t }
\t \t input[type=text]{
\t \t \t background-color: #3B4371;
\t \t \t font-family: 'Ubuntu', sans-serif;
\t \t }
\t \t input[type=text]:focus {
\t background-color: #fff;
\t font-family: 'Ubuntu', sans-serif;
\t box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
\t border: 3px solid #555;:
\t \t }
\t \t #title{
\t \t color: #fff;
\t \t font-family: 'Ubuntu', sans-serif;
\t \t text-transform: capitalize;
\t \t }
\t \t hr{
\t \t \t width: 50;
\t \t }
\t \t button{
\t \t margin-top: 10px;
\t \t opacity: 0.5;
\t \t cursor: default;
\t font-family: arial,sans-serif;
\t font-size: 15px;
\t font-weight: bold;
\t margin: 5px 30px 10px 30px;
\t min-width: 54px;
\t height: 30px;
\t padding: 0 16px;
\t text-align: center;
\t \t }
\t \t ol > li {
\t \t \t color: #fff;
\t \t \t font-family: sans-serif;
\t \t \t font-size: 20px;
\t \t \t background-color: #A9A9A9;
\t \t \t margin-top: 5px;
\t \t \t padding-left: 5px;
\t \t }
\t \t
\t \t
\t \t li:hover{
\t \t \t background: #808080;
\t \t \t cursor: pointer;
\t \t }
\t \t .strike{
\t \t \t text-decoration: line-through;
\t \t }
\t \t #close{
\t \t \t color: red;
\t \t \t font-size: 30px;
\t \t }<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">
\t <form>
\t \t <h1 class="text-center" id="title">Simple to-Do list</h1>
\t \t <hr width="50%">
\t \t <input type="text" id="inputTask" name="" placeholder="Title...">
\t \t <button id="submit-task">Hit Me!</button>
\t \t <!-- <button id="submit-task">Clear List</button> -->
\t
\t
\t <div id="display-taskList">
\t \t <h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3>
\t \t <ol id="listResult"></ol>
\t \t </div>
\t </form>
</div>
</div>
</body>
只是为了解决你的问题。 ['closest']（https://api.jquery.com/closest/）函数返回一个数组。因此'return n.style.visibility =“hidden”'将会失效，因为这里的'n'是一个数组而不是一个对象。使用'return n [0] .style.visibility =“hidden”'来隐藏项目。这就是说 - 有很多更好的方法来解决这个问题。你可以按照我的朋友给出的任何一个。 –
谢谢@NikhilNanjappa我认为你有最好的解释。我真的很明白我写的东西。 –