如何删除子元素

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();  
});