Как удалять div элемент в проекте todolist?

Question

[Mly]

Здраствуйте! Делаю проект todolist. Вот код:

<input class="type" type="search"placeholder="Добавить дело">
 <button id="add"> add</button>
 <button id="clear"> clear</button>
    
        <div class="out">
    </div>

var input=document.querySelector('.type');  // Инпут
var out=document.querySelector('.out1');  // блок вывода
var add=document.getElementById("add"); //Кнопка для добовления
var clear=document.getElementById("clear"); //Кнопка для очистки
let comp; //Компонент вывода

add.onclick=function(){
comp=document.createElement('div'); //При каждом коике на кнопку переменная comp создает элемент div
comp.innerHTML='<input type="checkbox">'+input.value; //Созданный div Берет значение из input и рядом создается input с классом checkbox
out.appendChild(comp); //Вывод блока в блок со списками
}

clear.onclick=function(){ //Функция для очистки
var clear=document.querySelectorAll(comp); 
if(clear.checked){
// Тут и пробема. Если checkbox==checked тогда при нажатие на кнопку clear input с значением checked убрать 
    comp.innerHTML='';
}
}

Comments

[Модератор]

Вопрос необходимо развернуть и конкретизировать.

Answer 1

[Big_Trouble]

Что то типа этого

<div class="app" id="app">
        <input class="type" type="search"placeholder="Добавить дело">
        <button id="add"> add</button>
        <button id="clear"> clear</button>
        <div class="out">
        </div>
    </div>

<script>
        let input = document.querySelector('.type'),
            out = document.querySelector('.out'),
            add = document.getElementById('add'),
            clear = document.getElementById('clear'),
            list = {}; // Объект в котором будет храниться наш todo-список
        // Функция рендера, каждый раз после изменения объекта list будет заново перерисовывать контент
        const renderList = () => {
            out.innerHTML = ''// Очищаем блок out
            for(let i in list){
                // Через цикл пробегаемся через объект, и создаем соотвественные чекбоксы с класом и data-id
                // data-id мы создаем когда добавляем новый todo элемент в функции addToList
                let comp = document.createElement('div')
                if(list[i].checked){
                    comp.innerHTML = `<input type="checkbox" class="checkbox-item" data-id="${i}" checked/> ${list[i].value}`
                } else {
                    comp.innerHTML = `<input type="checkbox" class="checkbox-item" data-id="${i}"/> ${list[i].value}`
                }
                out.appendChild(comp)
            }
        }
        const toggleCheckbox = (e) => {
            // Изменяем статус чекбокса в объекте list
           if(!e.target.classList.contains('checkbox-item')) return;
           const todoId = e.target.getAttribute('data-id');
           list[todoId].checked = !list[todoId].checked 
        }

        // Функция для добавления элемента todo    
        const addToList = () => {
            const todoId = '_' + Date.now() // Генерируем уникальный айдишник
            
            // Это конкретный todo элемент по умолчанию checked:false
            list[todoId] = {
                value: input.value,
                checked: false
            }
            input.value = ''// Очищаем форму ввода
            renderList()
        }
        
        // Функция для очистки списка
        // Через цикл бежим по объекту, если todo элемент имеет статус checked значит мы удаляем его из объекта
        const clearList = () => {
            for(let i in list){
                if(list[i].checked){
                    delete list[i]
                }
            }
            renderList()
        }

        // Слушатели событий
        add.addEventListener('click', () => addToList())
        clear.addEventListener('click', () => clearList())
        out.addEventListener('click', () => toggleCheckbox(event))

    </script>

Comments

[Mly]

Спасибо большое! Вы мне очень помогли.