Question 259723 in Html Question posted in
Some basic documentation can be found here.

Html – how to remove selected li from an ul in javascript

i created a todolist and a button which removes checked tasks from an ul but it removes all li’s from an ul.

      <div class="container mt-5">
      <ul class="list-group" id="tasks"> </ul>

      <div class="col">
        <button type="button" class="btn btn-primary" id="delchecked">Delete done tasks</button>
      </div>


        const li=document.createElement("li");
        li.className="list-group-item";
        tasks.appendChild(li);

        const checkBox=document.createElement("input")
        checkBox.className="form-check-input me-1 fa-pull-right"
        checkBox.type="checkbox"
        checkBox.name="chk"
        li.appendChild(checkBox);
        checkBox.id="checkBox";

        const delchecked=document.querySelector("#delchecked");
        delchecked.addEventListener("click",deleteCheckedItem);
        
     

         function deleteCheckedItem(){
          var k=document.getElementsByName('chk');  
          for(var i=0; i<k.length; i++){  
            if(k[i].checked==true) 
            tasks.removeChild(li);
          } 
        }

i want to remove selected li from an ul but code above removes all "li".

Tags:

2

Answers


  1. 0

    try this:

    function deleteCheckedItem() {
var checkboxes = document.getElementsByName('chk');
for (var i = checkboxes.length - 1; i >= 0; i--) {
  if (checkboxes[i].checked) {
    var listItem = checkboxes[i].parentNode;
    listItem.parentNode.removeChild(listItem);
  }
}
}
    Login or Signup to reply.
  2. 0

    You should make your "create task" logic a function to demonstrate multiple tasks. In your example, you only create one task.

    Now, if you want to delete a task, I advise you to find the nearest list relative to the button i.e. closest.

    const DEFAULT_TASKS = ['Take out the trash', 'Wash dishes', 'Clean laundry'];

const tasks = document.querySelector('#tasks');
const delChecked = document.querySelector("#delchecked");

DEFAULT_TASKS.forEach(addTask);
delChecked.addEventListener("click", deleteDoneTasks);

function addTask(task) {
  const li = document.createElement('li');
  li.className = 'list-group-item';
  tasks.appendChild(li);

  const checkBox = document.createElement('input');
  checkBox.className = 'form-check-input me-1 fa-pull-right';
  checkBox.type = 'checkbox';
  li.appendChild(checkBox);
  
  const label = document.createElement('span');
  label.textContent = task;
  li.append(label);
}

function deleteDoneTasks(e) {
  const container = e.target.closest('.container');
  const list = container.querySelectorAll('.list-group .list-group-item');
  for (let item of list) {
    if (item.querySelector('.form-check-input').checked) {
      item.remove();
    }
  }
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="container mt-5">
  <ul class="list-group" id="tasks"></ul>
  <div class="col">
    <button type="button" class="btn btn-primary" id="delchecked">Delete done tasks</button>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search