List element deleted after li is toggle

Labanino 0
Viewed 32

It is supposed to work like this. After I create an item on my list, it should be marked as done with a line-through after clicked and deleted after the delete button is clicked. All this is fine BUT what I really want is to be able to toggle the item as many times as I want. As you can see when I toggle the item it creates a new delete button instead.

function createListElement() {
  var li = document.createElement("li"); // you need to create a node first
  li.appendChild(document.createTextNode(input.value)); // then append it to the ul
  ul.appendChild(li);
  input.value = ""; // clear input after submit

  // mark it as done
  li.addEventListener("click", function () {
    li.classList.toggle("done");
    
    //create delete button
    var delete_btn = document.createElement("button");
    delete_btn.innerHTML = "Delete";
    li.appendChild(delete_btn);
    
    // removes element
    delete_btn.addEventListener("click", function () {
      li.parentNode.removeChild(li);
    });
  });
}

I'm adding a codepen so you can take a look at it. Thanks.

javascript
1 Answers

Check if there'a already a delete button, and don't add another one if so.

var button = document.getElementById("enter");
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");

// If a button is clicked
button.addEventListener("click", addListAfterClick);

// If input is keypressed
input.addEventListener("keypress", addListAfterKeypress);

function inputLength() {
  return input.value.length;
}

// create list and button elements
function createListElement() {
  var li = document.createElement("li"); // you need to create a node first
  li.appendChild(document.createTextNode(input.value)); // then append it to the ul
  ul.appendChild(li);
  input.value = ""; // clear input after submit

  // mark it as done
  li.addEventListener("click", function() {
    li.classList.toggle("done");
    if (!li.querySelector("button.delete")) {
      //create delete button
      var delete_btn = document.createElement("button");
      delete_btn.innerHTML = "Delete";
      delete_btn.classList.add("delete");
      li.appendChild(delete_btn);

      // removes element
      delete_btn.addEventListener("click", function() {
        li.parentNode.removeChild(li);
      });
    }
  });
}

function addListAfterClick() {
  if (inputLength() > 0) {
    createListElement();
  }
}

function addListAfterKeypress(event) {
  if (inputLength() > 0 && event.key === "Enter") {
    createListElement();
  }
}
body {
  @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300&display=swap');
  font-family: 'Plus Jakarta Sans', sans-serif;
}

li {
  cursor: pointer;
  padding: 5px 0;
}

li>button {
  margin-left: 10px;
}

.done {
  text-decoration: line-through;
}
<h1>Shopping List</h1>
<p><small>Click item to mark it as <strong>done.</strong></small></p>
<input id="userInput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
</ul>

Barmar0
Related