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我認爲你有最好的解釋。我真的很明白我寫的東西。 –