'How to delete one button when deleting last to-do list item (JavaScript)

I'm creating a to-do list and I want my CLEAR ITEMS button to be deleted once I delete the last item on the list (now it doesn't disappear unless I refresh the page). How can I achieve this? Any suggestions? I've tried different solutions but I really don't know how to make it work. I'm really stuck at this.

JavaScript code:

const toDoItems = document.getElementsByClassName("to-do-items")[0];
const input = document.getElementById("input");
const trashIcon = document.getElementById("trash");
const delItems = document.getElementsByClassName("clear-items")[0];

input.addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    addItem();
    clearItems();
  }
});

function addItem() {
  let divParent = document.createElement("div");
  let divChild = document.createElement("div");
  let checkIcon = document.createElement("i");
  let trashIcon = document.createElement("i");

  divParent.className = "item";
  divParent.innerHTML = "<div>" + input.value + "</div>";

  checkIcon.className = "fas fa-check-square";
  checkIcon.style.color = "lightgray";
  checkIcon.addEventListener("mouseenter", function () {
    checkIcon.style.color = "limegreen";
  });
  checkIcon.addEventListener("mouseleave", function () {
    checkIcon.style.color = "lightgray";
  });
  checkIcon.addEventListener("click", function () {
    checkIcon.style.color = "green";
    divParent.style.textDecoration = "line-through";
    checkIcon.addEventListener("mouseleave", function () {
      checkIcon.style.color = "green";
    });
  });
  divChild.appendChild(checkIcon);

  trashIcon.className = "fas fa-trash";
  trashIcon.style.color = "darkgray";
  trashIcon.addEventListener("mouseenter", function () {
    trashIcon.style.color = "rgb(182, 71, 71)";
  });
  trashIcon.addEventListener("mouseleave", function () {
    trashIcon.style.color = "darkgray";
  });
  trashIcon.addEventListener("click", function () {
    divParent.remove();
    if (toDoItems == 1) {
      delItems.remove();
    }
  });
  divChild.appendChild(trashIcon);

  divParent.appendChild(divChild);

  toDoItems.appendChild(divParent);

  input.value = "";
}

let clearButton = false;
function clearItems() {
  let clear = document.createElement("button");
  if (clearButton === false) {
    clear.innerHTML = "Clear Items";
    clear.className = "btn";
    delItems.appendChild(clear);
    input.removeEventListener("click", clearItems);
  }
  clearButton = true;
  document
    .getElementsByTagName("button")[1]
    .addEventListener("click", function () {
      window.location.reload();
    });
}

Here's the HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <title>To Do List</title>
  </head>
  <body>
    <div class="container">
      <div class="nav">
        <h2><i class="fa-solid fa-clipboard-check"></i> To-do List</h2>
        <div class="user-input">
          <input id="input" type="text" /><button
            onclick="addItem(), clearItems()"
          >
            Submit
          </button>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="to-do-items"></div>
      <div class="clear-items"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

javascript

Solution 1:^[1]

Every time you delete something. Check how many items are left. If that amount is 0 remove the clear all button. If you press the clear all button. Make sure at the end of the code that clears all the items you also remove the button.

you can use element.remove() to get rid of the button. More info here.

I would also use document.getElementById() to get the button (maybe items too) itself. More info on that here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ayak

'How to delete one button when deleting last to-do list item (JavaScript)

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]