如何在 JavaScript 中为数据条目的动态列表创建删除项目图像按钮

Question

我使用以下代码在我的网站上显示用户提交的数据列表。如何在每行显示数据的左侧或右侧添加用作按钮的 x 的小图像，以便删除该行数据和按钮本身。

updateAllDataDisplay(false);
function updateAllDataDisplay(addOne) {
// Updating the entire display
if (!addOne) {
for (var i = 0; i < allData.length; i++) {
let a = document.createElement("p");
let b = document.createTextNode(`${allData[i].month}/${allData[i].day}/${allData[i].year} (${allData[i].hours}:${allData[i].mins}:${allData[i].secs}): ${allData[i].exerciseHours}. ${allData[i].food}. ${allData[i].weight}. ${allData[i].mood}.`);
a.appendChild(b);
document.body.appendChild(a);
}
// Updating the last item of the display
} else if (addOne) {
let a = document.createElement("p");
if (allData.length > 0) {
let b = document.createTextNode(`${allData[allData.length - 1].month}/${allData[allData.length - 1].day}/${allData[allData.length - 1].year} (${allData[allData.length - 1].hours}:${allData[allData.length - 1].mins}:${allData[allData.length - 1].secs}): ${allData[allData.length - 1].exerciseHours}. ${allData[allData.length - 1].food}. ${allData[allData.length - 1].weight}. ${allData[allData.length - 1].mood}.`);
a.appendChild(b);
document.body.appendChild(a);
}
}
}

Answer 1

我使用简单的字符串list<string>创建了一个快速解决方法。

var allData = [
	"I was so happy when I wrote my very first Hello World in C#",
"It felt the Giant awaken in me",
"But I knew it was going to take hard, consistent, long hours of learning to be great at coding"];
function updateAllDataDisplay(addOne) {
// Updating the entire display
if (!addOne) {
for (var i = 0; i < allData.length; i++) {

//First the container or List item - 
//	- Added item class for styling
//	- added id for referencing
let container = document.createElement("div");
container.classList.add("item");
container.id = `item${i}`;

//	Second the button for deleting the list Item
let button = document.createElement("button");
button.appendChild(document.createTextNode("X"));
button.value = i;

button.addEventListener('click',
(e)=>{
								document.getElementById("root").removeChild(
	document.getElementById(`item${e.target.value}`)
);
}
);
//	The the actual information represented with a span
let textElement = document.createElement("span");
let text = document.createTextNode(`${allData[i]}`);

//	Now append all your elements accordingly
textElement.appendChild(text);
container.appendChild(textElement);
container.appendChild(button);
document.getElementById("root").appendChild(container);
}
}
}
updateAllDataDisplay(false);

div.item {
position: relative;
display: block;
background-color: #f1f1f1;
min-height: 40px;
padding-right: 40px; 
padding-left: 15px;
margin-bottom: 15px;
line-height: 40px;
}
// Style Span element holding the data
div>span {
display: block;
line-height: 40px;
width: 100%;
}
div>button {
padding: 15px;
position: absolute;
right: 0;
width: 40px;
height: 40px;
top: 0;
}

<div id="root">
</div>