CODEWITHSUNDEEP
javascriptjquery
Yerim Kang
Yerim Kang

Reputation: 311

how to remove child elements

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>

Upvotes: 1

Views: 75

Answers (2)

Sajib Khan
Sajib Khan

Reputation: 24146

Find the i element then remove it.

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

Upvotes: 1

Eddie
Eddie

Reputation: 26844

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/

Upvotes: 2

Related Questions