addEventListener will not attach a listener to the element

Question

/***************************************************** *
*  Function: renderTodos                             
*  Builds a list of todo items from an array
*  rebuilds list each time new item is added to array
****************************************************** */
function renderTodos(arr) {

  // erases all previous content
  uList.innerHTML = '';

  for ( var i = 0; i < tdArray.length; i++ ) {

    // create a link element
    var remex = document.createElement('span');
    //link element didn't work so try a button
    //var remex = document.createElement('input');
        //remex.setAttribute('type','button');
        remex.setAttribute('class', 'deletex');
        remex.innerHTML="X";
        // set attribute index and value
        remex.setAttribute('index', i);
        remex.addEventListener('click',removeTodo);
    console.dir(remex);   

        // create <li> element
    var li_element = document.createElement('li');
        li_element.style.lineHeight = "20pt";
        li_element.appendChild(remex);
        li_element.innerHTML += tdArray[i];

    // add item to list
    uList.appendChild(li_element);
    inField.value = '';
  }

} // /renderTodos

This function builds a list based on text field inputs. Each time the the "add item" button is clicked, the event calls this function to add the item to the list. Everything works beautifully UNTIL I try to add the eventListener to the "x" that is appended to the li element prior to the list item text. The idea is that the "x" is clickable, and onClick it removes the list item entry from the list. But I have tried 6 ways to Sunday to attach an eventListener to the "x" object and nothing works. I have tried attaching the event listener to a span object, and a button object; I have moved "remex.addEventListener..." all around in the function, after it has been rendered, before it gets rendered, etc.; I have eliminated the CSS; I have tried changing the addEventListener to onClick; I have tried this code on our own Apache server, I have moved it to jsbin.com in hopes that some server setting was getting in my way; and probably a few more things I can't remember in the long list of things I have tried. As you see, I have tried it as a button and as a span, hence the commented code.

In short, no matter what I try, the eventListener will NOT attach to the "x". Any ideas? Do you need to see more of the code?

Answer 1

This line overrides the attached eventlistener:

li_element.innerHTML += tdArray[i];

Setting innerHTML replaces all the original elements within li_element. += is just a shortcut to li_element.innerHTML = li_element.innerHTML + tdArray[i];

If tdArray[i] contains just some text, you can add its content like this:

li_element.appendChild(document.createTextNode(tdArray[i]));

If tdArray[i] contains elements, you could append a wrapper element, and then set the innerHTML of the wrapper.