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

Html – about the remove() function,how can i del the last element only?

I have the problem is that,When i press remove button,whole list is deleted,
for example,i add ABC and DEF,this 2 parts,
I press one time and ABC also gone!
how can i fix it?

<!DOCTYPE html>
<html>
  <head>
    <title>To-Do List</title>
  </head>
  <body>
    <h1>To-Do List</h1>`
    <input type="text" class="task" placeholder="Enter a task">
    <button class="Add">Add Task</button>
    <button class="removeTask">Remove</button>
    <ul class="taskList"></ul>
  </body>
  <script>



const taskList = document.querySelector(".taskList");
const RemoveEl = document.querySelector(".removeTask");
const addTask = document.querySelector(".Add");


addTask.addEventListener("click", (e)=>{ 
  const taskInput = document.querySelector(".task");
const newTask = document.createElement("li");
let task = taskInput.value;

  if (task.trim() != "") {
    
    newTask.innerText = task;
    taskList.appendChild(newTask);
    taskInput.value = "";};
  
    if(newTask){
  RemoveEl.addEventListener("click",()=>{

    taskList.remove();

  })
}});
  </script>
</html>

thank you so much!

Tags:

2

Answers


  1. 0

    The issue you’re facing is because in the event handler for the Remove button, you are calling remove() on the taskList, which is the ul containing all your tasks. This will remove the entire ul element from the DOM, thereby deleting all tasks.

    Instead, you should remove only the last task added to the list. Here’s how you can do it:

    <!DOCTYPE html>
<html>
  <head>
    <title>To-Do List</title>
  </head>
  <body>
    <h1>To-Do List</h1>`
    <input type="text" class="task" placeholder="Enter a task">
    <button class="Add">Add Task</button>
    <button class="removeTask">Remove</button>
    <ul class="taskList"></ul>
  </body>
  <script>
    const taskList = document.querySelector(".taskList");
    const RemoveEl = document.querySelector(".removeTask");
    const addTask = document.querySelector(".Add");

    addTask.addEventListener("click", () => {
      const taskInput = document.querySelector(".task");
      const newTask = document.createElement("li");
      let task = taskInput.value;

      if (task.trim() != "") {
        newTask.innerText = task;
        taskList.appendChild(newTask);
        taskInput.value = "";
      }
    });

    RemoveEl.addEventListener("click", () => {
      if (taskList.lastChild) {
        taskList.lastChild.remove();
      }
    });
  </script>
</html>

    This updated script adds an event listener to the Remove button outside of the Add button’s event listener. When the Remove button is clicked, it checks if there is a last child element in the task list (the last task added). If there is, it removes that element, leaving the rest of the task list intact.

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html>
  <head>
    <title>To-Do List</title>
  </head>
  <body>
    <h1>To-Do List</h1>
    <input type="text" class="task" placeholder="Enter a task">
    <button class="addTask">Add Task</button>
    <ul class="taskList"></ul>

    <script>
      const taskList = document.querySelector(".taskList");
      const addTaskButton = document.querySelector(".addTask");

      addTaskButton.addEventListener("click", () => {
        const taskInput = document.querySelector(".task");
        const task = taskInput.value.trim();

        if (task !== "") {
          const newTask = document.createElement("li");
          newTask.innerText = task;

          const removeButton = document.createElement("button");
          removeButton.innerText = "Remove";
          removeButton.addEventListener("click", () => {
            newTask.remove();
          });

          newTask.appendChild(removeButton);
          taskList.appendChild(newTask);
          taskInput.value = "";
        }
      });
    </script>
  </body>
</html>

    In this code, I’ve added a button element with the class name addTask. When this button is clicked, it creates a new task item (li) with the task text. Additionally, a remove button is created for each task item. Clicking on the remove button will remove the corresponding task item from the list.

    Note that I’ve also corrected the class name of the add button from "Add" to "addTask" to match the event listener in the JavaScript code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search