Как я могу добавить кнопку удаления в список элементов с javascript? - PullRequest
Новая
       0

Как я могу добавить кнопку удаления в список элементов с javascript?

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

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

[это мой кодовый блок] https://codepen.io/otaylor3/pen/MWaeYPL

//variables for my shopping list 
var input = document.getElementById("userinput");
var button = document.getElementById("enter");
var ul = document.querySelector("ul");
var list = document.getElementsByTagName("li");
var trash = document.getElementsByClassName("delete");
var btndelete = document.getElementById("trash");
// const myUL = document.getElementById("bold");

//For removing items with delete button
Array.prototype.slice.call(trash).forEach(function(item) {
	item.addEventListener("click", function(e) {
		e.target.parentNode.remove()
	});
	
	})





//loop for to strikeout the list 
for(var i = 0; i < list.length; i++) {
	list[i].addEventListener("click", strikeout);

}

//toggle between classlist
function strikeout () {
	this.classList.toggle("done");
}

//check the length of the string entered
function inputlength() {
	return input.value.length;
}

//collect data that is inserted 
function addli() {
	var li = document.createElement("li");
	var btn = document.createElement("button");
	li.appendChild(document.createTextNode(input.value));
	ul.appendChild(li);
	input.value = "";
	
	}




//this will add a new list item after click 
function addListAfterClick () {
	if ( inputlength() > 0 ) {
	 addli();
	 }

}

//this will add a new list item with keypress
function addListKeyPress (event) {
	if (inputlength() > 0 && event.which === 13) {
	 addli();}
	 }




//this will check for the event/keypress and create new list item
input.addEventListener("keypress",addListKeyPress);

//this will check for a click event and create new list item
button.addEventListener("click", addListAfterClick);
body {
  background-image: url("easy.jpg");
}
.coolTitle { 
text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 80px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: 
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey
}

.done {
	text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
	<title>Shopping List</title>
	<link rel="stylesheet" type="text/css" href="list.css">
</head>
<body>
	<h1>Shopping List</h1>
	<h2 class="second"> Get it Done </h2>
	<input id= "userinput" type="text" placeholder="enter items">
	<button id ="enter" >Enter</button>
	

    
	<ul id ="bold">
		<li random ="24">Eggs <button class="delete">delete</button></li><br>
		<li>Milk <button  class="delete">delete</button></li><br>
		<li>Cereal<button  class="delete">delete</button></li><br>
		<li>Chicken <button  class="delete">delete</button></li><br>
		<li>Oreos <button class="delete">delete</button></li><br>
	</ul>

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

Ответы [ 2 ]

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

Создайте элемент кнопки и добавьте к нему прослушиватели событий: 

//variables for my shopping list 
var input = document.getElementById("userinput");
var button = document.getElementById("enter");
var ul = document.querySelector("ul");
var list = document.getElementsByTagName("li");
var trash = document.getElementsByClassName("delete");
var btndelete = document.getElementById("trash");
// const myUL = document.getElementById("bold");

//For removing items with delete button
Array.prototype.slice.call(trash).forEach(function(item) {
  item.addEventListener("click", function(e) {
    e.target.parentNode.remove()
  });
})

//loop for to strikeout the list 
for (var i = 0; i < list.length; i++) {
  list[i].addEventListener("click", strikeout);
}

//toggle between classlist
function strikeout() {
  this.classList.toggle("done");
}

//check the length of the string entered
function inputlength() {
  return input.value.length;
}

//collect data that is inserted 
function addli() {
  var li = document.createElement("li");
  var btn = document.createElement("button");
  btn.className = "delete";
  btn.innerHTML = "delete";
  btn.addEventListener("click", function(e) {
    e.target.parentNode.remove();
  });
  li.addEventListener("click", strikeout);
  li.innerHTML = input.value + " ";
  li.appendChild(btn);
  ul.appendChild(li);
  input.value = "";
}

//this will add a new list item after click 
function addListAfterClick() {
  if (inputlength() > 0) {
    addli();
  }
}

//this will add a new list item with keypress
function addListKeyPress(event) {
  if (inputlength() > 0 && event.which === 13) {
    addli();
  }
}

//this will check for the event/keypress and create new list item
input.addEventListener("keypress", addListKeyPress);

//this will check for a click event and create new list item
button.addEventListener("click", addListAfterClick);
.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 80px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey
}

.done {
  text-decoration: line-through;
}
<h1>Shopping List</h1>
<h2 class="second"> Get it Done </h2>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>



<ul id="bold">
  <li random="24">Eggs <button class="delete">delete</button></li>
  <li>Milk <button class="delete">delete</button></li>
  <li>Cereal <button class="delete">delete</button></li>
  <li>Chicken <button class="delete">delete</button></li>
  <li>Oreos <button class="delete">delete</button></li>
</ul>

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

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

Вы можете добавить прослушиватель событий один раз к ul и отфильтровать, если целью является кнопка удаления. Это более эффективно, чем добавление нескольких прослушивателей событий.

https://dev.to/shimphillip/handing-javascript-events-efficiently-with-bubble-and-capture-4ha5

ul.addEventListener("click", function(e) {
  var target = e.target;
  if (target.classList.contains("delete")) {
    target.parentNode.remove();
  }
});


//variables for my shopping list 
var input = document.getElementById("userinput");
var button = document.getElementById("enter");
var ul = document.querySelector("ul");
var list = document.getElementsByTagName("li");
var trash = document.getElementsByClassName("delete");
var btndelete = document.getElementById("trash");
// const myUL = document.getElementById("bold");

ul.addEventListener("click", function(e) {
  var target = e.target;
  if (target.classList.contains("delete")) {
    target.parentNode.remove();
  }
});

//toggle between classlist
function strikeout() {
  this.classList.toggle("done");
}

//check the length of the string entered
function inputlength() {
  return input.value.length;
}

//collect data that is inserted 
function addli() {
  var li = document.createElement("li");
  var btn = document.createElement("button");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";

}




//this will add a new list item after click 
function addListAfterClick() {
  if (inputlength() > 0) {
    addli();
  }

}

//this will add a new list item with keypress
function addListKeyPress(event) {
  if (inputlength() > 0 && event.which === 13) {
    addli();
  }
}




//this will check for the event/keypress and create new list item
input.addEventListener("keypress", addListKeyPress);

//this will check for a click event and create new list item
button.addEventListener("click", addListAfterClick);
body {
  background-image: url("easy.jpg");
}

.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 80px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey
}

.done {
  text-decoration: line-through;
}

li {
  margin-top: 6px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Shopping List</title>
  <link rel="stylesheet" type="text/css" href="list.css">
</head>

<body>
  <h1>Shopping List</h1>
  <h2 class="second"> Get it Done </h2>
  <input id="userinput" type="text" placeholder="enter items">
  <button id="enter">Enter</button>

  <ul id="bold">
    <li random="24">Eggs <button class="delete">delete</button></li>
    <li>Milk <button class="delete">delete</button></li>
    <li>Cereal<button class="delete">delete</button></li>
    <li>Chicken <button class="delete">delete</button></li>
    <li>Oreos <button class="delete">delete</button></li>
  </ul>

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

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

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

...