Outputting an object to a page that keeps close function

Question

I posted this question before, among others. But it was suggested I need to ask a more specific or focused question.

I am working on an output history log on a single page. And I want to make it so each output it's self is contained in box object that can be closed or deleted individually. Like this.

Now I have managed to get everything working to the point where it will nicely output to a box with a close button. However the close button it's self will not function in this case.

So, I am trying to output it like this...

HTML:

<p>History log:</p><br><div style="white-space:pre-wrap"><ul 
id="outputListItem" class="boxcontainer"></ul></div> 

SCRIPT:

document.getElementById("Add").onclick = function(e) {
convertOutput();
}

function convertOutput(){
//this is the part I have been trying to get working
convertOutput.addEventListener('close', function() {
this.parentElement.style.display = 'none';
}
});

var output = document.getElementById("output").value;
var li = document.createElement('li');
li.className = "containedboxes";
var dateTime = todayDateTime();

li.innerHTML = "<time id='time'>" + dateTime +"</time><br /> <br />"+ output 
+"<br /><br /><span class='close'>&times;</span>";
   document.getElementById('outputListItem').prepend(li);
}

And the script to close the box:

var closebtns = document.getElementsByClassName("close");
var i;

for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}

It was suggested to me on the last question I posed I should use convertOutput() right after addEventListener() loop immediately after it. If this is how you do it, i am still quite new to JavaScript, so not sore how to properly do this. I created a fiddle for this also, but for some reason I can't get the script to run properly in the fiddle, But all the code is there to see.

I am looking to solve this using vanilla JavaScript.

Answer 1

Your boxes don't respond to the click event simply because your script crashes before the events even get attached to it. The following block right at the beginning:

document.getElementById("Add").onclick = function(e) {
convertOutput();
}

tries to add a click listener to the HTML element Add which does not exist. If you either remove the code block or add the appropriate element your boxes will have it's click functionality.

Answer 2

I created an example for you. Hopefully this helps you get going :) A couple things to note, I use a data attribute to store the index for the item in the array, so you can delete it when you click on the list item.

document.addEventListener('DOMContentLoaded', function(){
 let nameEl = document.querySelector("#name");
 let submitEl = document.querySelector("#submit-name");
 let historyEl = document.querySelector(".history-list");

 let historyList = [
  { name: 'Mitch'},
  { name: 'Max'},
  { name: 'Mike'},
 ];

 function addToList(arr) {
  // Clear up list and then update it
  while(historyEl.firstChild) {
   historyEl.removeChild(historyEl.firstChild);
  }
  // Update the list with the historyList
  for(let item in historyList) {
   let name = historyList[item].name;
   let listContent = document.createElement("li");
   listContent.textContent = name;
   // We will use the index to remove items from the list
   listContent.setAttribute('data-value', item);
   listContent.addEventListener("click", removeFromList)
   historyEl.appendChild(listContent);
  }
 }

 function removeFromList(index) {
  // Takes the index of the object, and will later remove it
  console.log("Removed Item " + this.dataset.value);
  historyList.splice(index, 1);
  addToList(historyList);

 }

 addToList(historyList);

 submitEl.addEventListener("click", function(event) {
  if(nameEl.value) {
   // Add the name to the start of the history list array.
   historyList.unshift({ name: nameEl.value})
   nameEl.value = '';
   // Update the dom with the new array
   addToList(historyList);
  }
 });
});

<label for="name">Type Name</label>
<input type="text" name="name" id="name">
<button id="submit-name">Submit Name</button>

<ul class="history-list"></ul>

Hopefully this gives you a good idea on how to get the task done and let me know if you have any questions :)