Question 246682 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I have no idea how to create a delete button / option using remove method in JS

I simply cannot and do not know how to make a delete option. I am super new to coding. I want to have a delete option next to each guest that already are on the list, as well as the new guests that will pop up. I know that I need to add a keyword / variable at the end of the bullet list of guests so that this button / option will appear, but I cannot make it. I want it to appear and work, but I simply can’t and I have been trying many methods such as removeChild and removeEvent Listener.

<!DOCTYPE html>
<html>

<body>
  <h2>Guest list</h2>
  <p id="demo"></p>
  <h3>Add a new guest!</h3>
  <form name="myform" action="">
    <span>Name:</span><input type="text" name="name" value="" />
    <span>Surname:</span><input type="text" name="surname" />
    <span>Age:</span><input type="text" name="age" />
    <input type="button" name="button" value="Add a guest" onClick="addAGuest(this.form)" />
  </form>
  <p style="color: red; font-weight: bold;" id="err"></p>
  <p onclick="removeButton()"style="color:darkorange; text-decoration: underline; cursor: pointer;" id="deleteButton">Delete this guest</p>
  <script>

 

    function getGuests() {
      const guests = [{ name: "James", surname: "Moth", age: 20 }, { name: "Ford", surname: "Mustang", age: "24" }, { name: "Jim", surname: "Smith", age: 19 },
      { name: "Christian", surname: "Neutron", age: 12 }];
      return guests;
    }

       function getBulletListOfGuests(guests) {
       let bulletList = "<ul>";
        for (i = 0; i < guests.length; i++) {
        bulletList = bulletList + "<li>The guest's name is " + guests[i].name + " " + guests[i].surname + " and they are " + guests[i].age + " years old." + "</li>"
       ;
      }
      return bulletList + "</ul>";
  }

  function removeButton(guests) {
      remove.guest;
    }

    const myGuests = getGuests();

    function resetErrorMessage() {
      document.getElementById("err").innerHTML = "";
    }

    function setErrorMessage(message) {
      document.getElementById("err").innerHTML = message;
    }

    function validateGuest(guest) {
      let errorMessage = "";
      if (guest.name == "") {
        errorMessage = errorMessage + "Name cannot be empty<br>";
      }
      if (guest.surname == "") {
        errorMessage = errorMessage + "Surname cannot be empty<br>"
      }
      if (guest.age == "") {
        errorMessage = errorMessage + "Age cannot be empty<br>";
      }
      return errorMessage;
    }

    function addAGuest(form) {
      const formData = new FormData(form);
      let guestToAdd = {};
      formData.forEach(function (value, key) {
        guestToAdd[key] = value;
      });
      let errorMessage = validateGuest(guestToAdd);
      resetErrorMessage();
      if (errorMessage == "") {
        myGuests.push(guestToAdd);
        displayListOfGuests(myGuests);
      } else {
        setErrorMessage(errorMessage);
      }
    }

    function displayListOfGuests(guests) {
      document.getElementById("demo").innerHTML = getBulletListOfGuests(guests);
    }

    displayListOfGuests(myGuests);
  </script>
</body>

</html>

I want to display a delete button next to every guest that I add. I have tried

remove();

method, but it does not seem to work at all. How can I set a variable so that I can put it at the end of the bullet list of guests and actually make it work?

Tags:

2

Answers


  1. 0

    I would suggest to use HTML DOM api for working with rows.

    this bit of code would become….

    let bulletList = "<ul>";
for (i = 0; i < guests.length; i++) {
        bulletList = bulletList + "<li>The guest's name is " + guests[i].name + " " + guests[i].surname + " and they are " + guests[i].age + " years old." + "</li>";
}

const list = document.createElement("ul");

for (i = 0; i < guests.length; i++) {
    const item = document.createElement("li");
    item.innerText = "<li>The guest's name is " + guests[i].name + " " + 
      guests[i].surname + " and they are " + guests[i].age + " years old." + "</li>";
    
   //create new button
   const removeButton = document.createElement("button");
   //add click event listener
   button.onclick = function() {
     //in this case "this" will be the button itself
     const row = this.closest('li');
     // removing entire row will make the work
     row.remove()
   }
// the text can be whatever you want
   button.innerText = "Delete Row"

    list.appendChild(item)
}
    Login or Signup to reply.
  2. 0

    If your guest has an ID it’ll make it easier for your program to identify what guest to delete, so I make a modification to the list of guests.

    Note that what you are trying to do would require a database/localstorage to work as expected.

    const guests = [
    { id: 1, name: "James", surname: "Moth", age: 20 },
    { id: 2, name: "Ford", surname: "Mustang", age: "24" },
    { id: 3, name: "Jim", surname: "Smith", age: 19 },
    { id: 4, name: "Christian", surname: "Neutron", age: 12 },
];

    I made a small modification to the getBulletListOfGuest() function to add the delete button. The delete button has an attribute called onclick which take a function that I created called deleteGuest.

    const guest = guests[i];

bulletList = bulletList +
    `<li>
         The guest's name is ${guest.name} ${guest.surname} and they are ${guest.age}years old.
         <button type="button" onclick="deleteGuest(${guest.id})">Delete</button>
    </li>`;

    The ** deleteGuest** function take the ID of the guest the user is trying, then the guest can be filtered out of the list.

    function deleteGuest(id) {
    const updateGuests = myGuests.filter(function (guest) {
        return guest.id !== id;
    });

    displayListOfGuests(updateGuests);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search