Как создать кнопку удаления элемента изображения для динамического c списка записей данных в 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>