how to remove child elements

Question

I am making a todo app with javascript, bootstrap, jquery. I want to make the color of the checkbox darker when you click the task. What I'm thinking is to remove the child element i, but not the task (for example Python), and add a new child element i. I tried .empty() method but the thing is the task also gets removed. Is there any way that I can remove the element i but leave the task?

 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

Your have to use .remove(); instead of .empty()

If you want to remove the whole row, you can $(this).remove();

If you want to remove just the check icon, you can $(this).find('svg').remove();

---

You can also use .hide() if you are planning to show it again. ex: $(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

Find the i element then remove it.

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