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

【问题标题】：How do I create a remove item image button for a dynamic list of data entries in JavaScript如何为 JavaScript 中的数据条目动态列表创建删除项目图像按钮
【发布时间】：2020-02-14 22:01:17
【问题描述】：

我有一个用户提交的数据列表，使用下面的代码显示在我的网站上。如何在每行显示数据的左侧或右侧添加一个用作按钮的 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);
        }
    }
}

【问题讨论】：

我已经为此添加了一个快速答案。问题是你没有提供你正在使用的数据，所以我创建了一个句子列表来说明这个想法。

标签： javascript list button

【解决方案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>

【讨论】：