Reputation: 67
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
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
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