如何刪除子元素

Question

我正在使用javascript，bootstrap，jquery創建一個todo應用程序。 單擊任務時，我想使復選框的顏色更暗。 我在想的是刪除子元素i，但不刪除任務（例如Python），並添加一個新的子元素i。 我嘗試過.empty（）方法，但事情是任務也被刪除了。 有什么方法可以刪除元素但是離開任務嗎？

 var lst = document.getElementsByTagName("li"); var icon = '<i class="far fa-check-square"></i>'; for (var i = 0; i < 3; i++) { $(lst[i]).append(icon); }; $(lst).click(function() { $(this).empty(); }); 

 body { padding: 0; margin: 0; } #container { width: 500px;} #container, #header, #tasks { border: 1px solid black; margin: 0 auto; } #header { text-align: center; padding: 0 0 20px 0;} input { padding: 10px; border: 0; border-bottom: 1px solid rgb(177, 177, 177); } span { padding: 7.5px; border: 1px solid rgb(177, 177, 177); background-color: rgb(219, 219, 219); } li { list-style-type: none; padding: 20px 15px; border: 1px solid black;} ul { padding: 0; margin: 0; } .fa-check-square { float: right; font-size: 25px; } 

  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="header"> <h1>TODO</h1> <input type="text" id="newTask" placeholder="type your task here"> <span id="addTask">ADD</span> </div> <div id="tasks"> <ul> <li>Python</li> <li>Java</li> <li>React</li> </ul> </div> </div> 

Answer 1

你必須使用.remove(); 而不是.empty()

如果你想刪除整行，你可以$(this).remove();

如果你只想刪除支票圖標，你可以$(this).find('svg').remove();

---

如果您打算再次顯示，也可以使用.hide() 。 例如： $(this).find('svg').hide();

---

 var lst = document.getElementsByTagName("li"); var icon = '<i class="far fa-check-square"></i>'; for (var i = 0; i < 3; i++) { $(lst[i]).append(icon); }; $(lst).click(function() { $(this).find('svg').remove(); }); 

 body { padding: 0; margin: 0; } #container { width: 500px;} #container, #header, #tasks { border: 1px solid black; margin: 0 auto; } #header { text-align: center; padding: 0 0 20px 0;} input { padding: 10px; border: 0; border-bottom: 1px solid rgb(177, 177, 177); } span { padding: 7.5px; border: 1px solid rgb(177, 177, 177); background-color: rgb(219, 219, 219); } li { list-style-type: none; padding: 20px 15px; border: 1px solid black;} ul { padding: 0; margin: 0; } .fa-check-square { float: right; font-size: 25px; } 

  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="header"> <h1>TODO</h1> <input type="text" id="newTask" placeholder="type your task here"> <span id="addTask">ADD</span> </div> <div id="tasks"> <ul> <li>Python</li> <li>Java</li> <li>React</li> </ul> </div> </div> 

Doc： https ： //api.jquery.com/remove/

Answer 2

找到i元素然后刪除它。

$(lst).click(function() {
  $(this).find('i').remove();  
});