Как удалить выбранный li из ul в javascript

Я создал список задач и кнопку, которая удаляет отмеченные задачи из ул., но удаляет все ли из ул.

      <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>
        function addTask() {

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

я хочу удалить выбранный li из ul, но приведенный выше код удаляет все «li».

if (k[i].checked=true) должно быть if (k[i].checked==true); вы назначаете, когда хотите сравнить.

— 06.10.2023 15:19

да, я пропустил равное, но все равно удалил все ли :(

— 06.10.2023 15:25

Я создал jsfiddle из вашего кода, и он работает правильно (с исправлением == vs =): jsfiddle.net/ew0msfdo. Одна рекомендация: не сравнивайте с логическими значениями. Просто используйте if (k[i].checked). Еще одна рекомендация: всегда используйте фигурные скобки, поэтому if (k[i].checked) { tasks.removeChild(li); }.

— 06.10.2023 15:32

javascript html

06.10.2023 15:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

попробуй это:

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

06.10.2023 15:36

Вы должны сделать логику «создания задачи» функцией для демонстрации нескольких задач. В вашем примере вы создаете только одну задачу.

Теперь, если вы хотите удалить задачу, советую найти ближайший список относительно кнопки т. е. 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-2 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-4">
  <ul class = "list-group mb-2" 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>

06.10.2023 15:39

Другие вопросы по теме

Адаптивность и @media для SCSS

Допустимо ли наличие внутри элемента html другого элемента html?

Почему выравнивание по центру во флексбоксе работает так странно?

FOUC в светлом режиме

HTML `for` не принимает идентификатор тега привязки

Как заблокировать срабатывание ссылки, если я нажму на ее внутренний элемент?

У меня возникли проблемы с исправлением приведенного ниже

Будет ли для параметра InnerHTML задана пустая строка, а также будут удалены дочерние узлы?

Событие selectstart не работает в поле input

Не могу правильно выровнять навигационную панель в HTML/CSS

Как удалить выбранный li из ul в javascript

Ответы 2

Другие вопросы по теме

Похожие вопросы