How can I add a delete button to a list items with javascript?

Question

For example when you type in a new item, you are able to add with either the enter key or clicking the enter button, but I want the new li item that is added to have a button right next to it that says delete, and I will be able to delete this new li item if I click that button. I figured I would need to create element, and then I need to have a listener, but cannot figure out how to do this right.

[this is my codepen] 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>

lmarqs · Accepted Answer · 2020-04-18 21:48:20Z

You can add a event listener once to the ul and filter if the target is the delete button. It is more efficient than adding multiple event listeners.

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>

Tamas Szoke · Accepted Answer · 2020-07-08 06:17:01Z

0

Create the button element and add the event listener to it:

//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>

I suggest using the click event of the ul instead of the multiple event handlers on the li elements.

edited Jul 8, 2020 at 6:17

answered Apr 18, 2020 at 22:18

Tamas Szoke

5,5524 gold badges29 silver badges43 bronze badges

6 Comments

otaylor3 Over a year ago

Thank you so much. Going to try this out tonight.

otaylor3 Over a year ago

Wow that totally worked. That is exactly what I wanted to do. Are you suggesting using the click event on the ul because the code would be cleaner? or is there another reason you suggest that?

Tamas Szoke Over a year ago

It's cleaner and more efficient in terms of performance. Can I ask you why the other answer is accepted, since it doesn't solve the question?

otaylor3 Over a year ago

Hello Tamas, I am super new to stack overflow and still getting the hang of things. I wanted to accept your answer and the other one as you mentioned did not solve the question. How do I ensure to accept your answer and not the other one?

otaylor3 Over a year ago

Thanks I went ahead and did the check next to your answer. Will do the tour to ensure I navigate appropriately. I am currently learning Javascript so really appreciate the help :)

|

Collectives™ on Stack Overflow

How can I add a delete button to a list items with javascript?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related