我根本无法也不知道如何创建删除选项。我对编码非常陌生。我希望在已在列表中的每位客人以及将弹出的新客人旁边有一个删除选项。我知道我需要在客人项目符号列表的末尾添加一个关键字/变量，以便出现此按钮/选项，但我无法做到。我希望它出现并工作，但我根本做不到，我一直在尝试许多方法，例如removeChild和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>
我想在我添加的每个客人旁边显示一个删除按钮。我试过了
remove();
方法，但是好像根本不起作用。我如何设置一个变量，以便我可以将其放在客人项目符号列表的末尾并使其真正起作用？
我建议使用 HTML DOM api 来处理行。
这段代码将变成......
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)
}