Question 324310 in Html Question posted in
Some basic documentation can be found here.

Html – Click delete box to delete box and text using javascript

I have a shopping list, and next to each item there is a delete button. I want to click the button and remove the button and text next to it using javascript. I have tried the following but I have not had luck. I grabbed each button using document.getElementsByClassName("delete");, then added a click event to each using a for loop. I then created the remove function seen in the code that should delete the whole element on a click. Thanks.

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="italic" random="23">Notebook <button class="delete">Delete</button></li>
        <li class="bold red">Jelly <button class="delete">Delete</button></li>
        <li>Spinach <button class="delete">Delete</button></li>
        <li>Rice <button class="delete">Delete</button></li>
        <li>Birthday cake <button class="delete">Delete</button></li>
        <li>Candles <button class="delete">Delete</button></li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Javascript:

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

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

function onOffClick(event) {
    this.classList.toggle("done");
}

function remove(event) {
    event.target.remove();
}

for (var i=0; i<li.length; i++) {
    li[i].addEventListener("click", onOffClick);
}

for(var i = 0; i < del.length; i++){
    del[i].addEventListener("click", remove);
}


button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);
Tags:

2

Answers


  1. 0

    your using event.target to remove the element. The problem is that event.target only targets the button and not the link. try using event.target.parentElement

    Login or Signup to reply.
  2. 0

    The issue you’re facing is because the remove function is only removing the button itself, not the entire list item (li). To remove the entire list item, you need to access the parent of the button (which is the li element) and remove that instead.

    Here’s how you can modify the remove function:

    function remove(event) {
// Prevent the list item click event from firing when the button is clicked
event.stopPropagation();

// Get the button's parent element, which is the list item
var listItem = event.target.parentElement;

// Remove the list item
listItem.remove();
}

for(var i = 0; i < del.length; i++){
    del[i].addEventListener("click", remove);
}

    Here’s what the changes do:

    event.stopPropagation(): This stops the click event from bubbling up to the list item. Without this, clicking the button would also trigger the onOffClick event attached to the list item.

    event.target.parentElement: This gets the parent of the button, which should be the li element.

    listItem.remove(): This removes the list item from the DOM.

    With these changes, clicking a delete button should remove the entire corresponding list item.

    One more thing to note is that if you add new items to your list using your createListElement function, these new items won’t automatically have the delete functionality because the event listeners are only attached on page load. You might want to modify your createListElement function to also attach the delete event listener to new delete buttons. Here’s how you could do it:

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

var deleteButton = document.createElement("button");
deleteButton.innerHTML = "Delete";
deleteButton.className = "delete";
deleteButton.addEventListener("click", remove); // Attach the remove function to the new button
li.appendChild(deleteButton);

ul.appendChild(li);
input.value = "";
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search