Как добавить кнопки рядом с каждым элементом списка, чтобы удалить элемент при нажатии на соответствующую кнопку удаления - PullRequest
Новая
       0

Как добавить кнопки рядом с каждым элементом списка, чтобы удалить элемент при нажатии на соответствующую кнопку удаления

0 голосов
/ 12 апреля 2020

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

предложите мне, как кодировать этот лучший и эффективный способ !!! а также я прикрепил свой код после добавления удара

любезно помогите мне 

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.getElementsByTagName("li");

function inputLength() {
	return input.value.length;
}

function createListElement() {
	var li = document.createElement("li");
	li.appendChild(document.createTextNode(input.value));
	ul.appendChild(li);
	input.value = "";
}

function addListAfterClick() {
	if (inputLength() > 0) {
		createListElement();
	}
}

function addListAfterKeypress(event) {
	if (inputLength() > 0 && event.keyCode === 13) {
		createListElement();
	}
}

for(var i=0; i<li.length; i++)
{
	li[i].addEventListener("click", function(event)
	{
		event.target.classList.toggle("done");
	});
}


button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);
.done {
  text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
	<title>Javascript + DOM</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Shopping List</h1>
	<p id="first">Get it done today</p>
	<input id="userinput" type="text" placeholder="enter items">
	<button id="enter">Enter</button>
	<ul>
		<li class="bold red" random="23">Notebook</li>
		<li>Jello</li>
		<li>Spinach</li>
		<li>Rice</li>
		<li>Birthday Cake</li>
		<li>Candles</li>

		<!-- <li class="bold red" random="23">Notebook</li><button id="delete">delete</button>
		<li>Jello</li><button id="delete">delete</button>
		<li>Spinach</li><button id="delete">delete</button>
		<li>Rice</li><button id="delete">delete</button>
		<li>Birthday Cake</li><button id="delete">delete</button>
		<li>Candles</li><button id="delete">delete</button> -->


	</ul>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 12 апреля 2020

Вам нужно поместить <button> внутри элемента <li> и поместить на него событие click примерно так: 

if( event.target.classList.contains('done') ) {
    // add delete button
    const buttonElem = document.createElement('button');
    buttonElem.innerText = 'delete';
    buttonElem.onclick = function() { // remove list item here
        this.parentElement.remove()
    };
    event.target.appendChild(buttonElem);
} else {
    // remove the delete button
    event.target.getElementByTagName('button').remove();
}

Это должно быть внутри прослушивателя событий click после переключатель done. В основном, если элемент списка classList содержит класс done, тогда добавьте кнопку с уже предопределенным обработчиком событий внутри элемента li. Внутри onclick this содержится фактический элемент (button), когда произошел щелчок. Вот почему мы go поднимаем дерево DOM на один уровень с помощью parentElement и вызываем функцию remove(), весь элемент li удаляется из DOM. Если класс done отсутствует, это означает, что задача «отменена», и сама кнопка должна быть удалена.

С другой стороны, я бы предпочел использовать список в массиве и использовать функция "рендеринга". Таким образом, будет «единый источник истины». Как я всегда говорю ... вставьте logi c в JS и позвольте HTML только реагировать на это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...