CODEWITHSUNDEEP
javascripthtmlcssbutton
pravin deva
pravin deva

Reputation: 67

How to add buttons next to each list item to delete the item when clicked on its corresponding delete button

I have no idea of delete the list items that corresponds to the each list. Even Though i came with remove child method still bit confusing and got error and stuck to the same point.

suggest me how to code this better and efficient way!!! and also i attached my code after adding strike

kindly help me

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>

Upvotes: 0

Views: 5981

Answers (2)

Anton Mett
Anton Mett

Reputation: 31

Create function for adding "Delete" button.

function addDelButton(parent) {
var buttonElem = parent.appendChild(document.createElement("button"));
buttonElem.innerHTML = "Delete";
buttonElem.onclick = function() {
    this.parentElement.remove();
}}

Insert that function into createListElement function like that:

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

To Add button with functionality to already existing list items :

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

Upvotes: 1

Phil
Phil

Reputation: 340

You need to put the <button> inside the <li> element and put a click event on it something like this:

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();
}

This should be inside the click event listener after the done toggle. Basically if the list item classList contains the done class, then add a button with an already predefined event handler inside the li elem. Inside the onclick the this contains the actual element (button) the click happened. This is why we go up the DOM tree one level with the parentElement and call a remove() function the whole li elem is removed from the DOM. If the done class is not present it means that the task is "undone" and the button itself needs to be removed.

On the other hand I'd rather use a list in an Array and use a "render" function. This way there would be a "single-source-of-truth". As I always say... put logic in the JS and let the HTML only react to this.

Upvotes: 1

Related Questions