Κак сделать чтобы при клике удалялся все отмеченные элементы?

Question

[bach1]

<div class="myToDo">
    <h1>To do List</h1>
    <input type = "text" placeholder="Enter your plan">
    <ul id="plan"></ul>
    <p id="cnt">COUNT : <span id="span"></span></p>
    <button id="completed">Clear Completed items</button>
 </div>

let inputValue = document.querySelector('input');
let btn = document.getElementsByTagName('button');
let ulListPlan = document.getElementById('plan');

inputValue.addEventListener('keyup', function (event) {
	let li = document.createElement('li')
	let checkBox = document.createElement('input');
	let close = document.createElement('button');
	close.innerHTML = "X";
	checkBox.type = "checkBox";
	//Creating plans with checkbox and delete button
	if (event.keyCode == 13) {
		li.innerHTML = inputValue.value;
		ulListPlan.appendChild(close);
		ulListPlan.appendChild(li);
		ulListPlan.appendChild(checkBox);
		//check status
		checkBox.onclick = function () {
			if (checkBox.checked) {
				li.style.userSelect = 'none';
				li.style.backgroundColor = 'grey'
			} else if (checkBox.checked == false) {
				li.style.backgroundColor = 'white';
				li.style.userSelect = "text";
			}
		}
		//Delete plans one by one
		close.onclick = function () {
			li.parentNode.removeChild(li);
			close.parentNode.removeChild(close);
			checkBox.parentNode.removeChild(checkBox);
		}
	}
	//how much plans
	let liLenght = document.querySelectorAll('li');
	let howMuch = document.getElementById('cnt');
	let spn = document.getElementsByClassName('span');
	for (let i = 1; i < liLenght.length; ++i) {
		span.innerHTML = i;
	}
	//Clear all complated plans
	let clearComleted = document.getElementById('completed');
	clearComleted.onclick = function () {

	}
});

Comments

[Александр]

Песочница где?

[Сергей Соколов]

Для начала научиться обёртывать код в вопросе в тег code, а лучше делать пример в песочнице, например, jsFiddle, и давать ссылку на него.

[bach1]

Александр, https://jsfiddle.net/ce17xhrL/1/

Answer 1

[Александр]

Хотя бы так. Но как я понял, на предыдущий вопрос Вы даже ответы не смотрели.

let inputValue = document.querySelector('input');
let btn = document.getElementsByTagName('button');
let ulListPlan = document.getElementById('plan');
let clearComleted = document.getElementById('completed');

clearComleted.addEventListener('click', function () {
    let completed = document.querySelectorAll('input[type="checkbox"]:checked');
    for (let entry of completed) {
        entry.parentNode.remove();
    }
});

function createTodo(value) {
    let li = document.createElement('li')
    let checkBox = document.createElement('input');
    let close = document.createElement('button');
    let text = document.createTextNode(value);
    close.textContent = "X";
    checkBox.type = "checkBox";

    checkBox.addEventListener('input', function () {
        if (checkBox.checked) {
            li.style.userSelect = 'none';
            li.style.backgroundColor = 'grey'
        } else {
            li.style.backgroundColor = 'white';
            li.style.userSelect = "text";
        }
    });

    close.addEventListener('click', function () {
        li.remove();
    });

    li.append(checkBox, text, close);
    ulListPlan.append(li);
}

inputValue.addEventListener('keyup', function (event) {
    if (event.keyCode == 13 && inputValue.value.length > 0) {
        createTodo(inputValue.value);
        inputValue.value = '';
    }
});

Comments

[bach1]

Большое спасибо конечно но мне по этому коду презентацию надо делать а здесь ничего не понятно :D

[Александр]

bach1, что не понятно?

[bach1]

let completed = document.querySelectorAll('input[type="checkbox"]:checked'); argument

function createTodo(value) value argument

createTodo(inputValue.value);
inputValue.value = ''; ??

[Александр]

bach1, document.querySelectorAll вернет все элементы, соответствующие селектору input[type="checkbox"]:checked, т. е. все элементы input типа checkbox, которые отмечены.
createTodo просто функция а value аргумент, то, что будет написано. Вызывается со значение из inputValue.
inputValue.value = ''; это просто хорошая практика, когда добавляется новый элемент Todo очищаем значение поля, чтобы новое вводить.

[bach1]

Александр, Большое спасибо