Javascript : Event Listener not working

Question

I am a javascript beginner and trying to make a simple list to which a user can add or remove items. Adding items to the list works but the event listeners won't work on removing an item.

txt = document.getElementById('txt_input');
submit = document.getElementById('txt_submit');
removeBtn = document.getElementsByClassName('remove');
window.onload = txt.focus();
submit.onclick = addToList;

for (var i = 0; i < removeBtn.length; i++) {
  if (document.querySelector("li") !== null) {
  	removeBtn[i].onclick = removeFromList;
  }    	
}

function removeFromList(e) {
  event.target.parentNode.outerHTML = "";
}

function createRemoveButton(parent) {
  var listBtn = document.createElement('input');
  listBtn.setAttribute('type', 'submit');
  listBtn.setAttribute('value', 'Remove');
  listBtn.setAttribute('class', 'remove');
  listBtn.style.marginLeft = '20px';
  parent.appendChild(listBtn);
}
var list;

function addToList() {
  if (document.querySelector("ul") === null) {
    list = document.createElement('ul');
  }
  var listItem = document.createElement('li');
  var txtNode = document.createTextNode(txt.value);
  listItem.appendChild(txtNode);
  createRemoveButton(listItem);
  list.appendChild(listItem);
  document.body.appendChild(list);
  txt.value = '';
  txt.focus();
}

<input type="text" id="txt_input">
<input type="submit" value="Add" id="txt_submit">

The issue is that you are trying to bind event handlers on elements that don't exist yet. You need to look into event delegation — mhodges
– mhodges, Commented Feb 5, 2018 at 17:51
The other thing you can do is say listBtn.onclick = removeFromList after you create the remove button in your createRemoveButton function before adding it to the DOM. — mhodges
– mhodges, Commented Feb 5, 2018 at 17:52
Yes, mhodges is correct. Your loop at the top doesn't find any elements to bind events to. You need to add the event listener as in the function that creates the button. You have the variable: listBtn, so assign the listener to it. — MrCoincidence
– MrCoincidence, Commented Feb 5, 2018 at 17:54
that could simply be solved by adding an if condition in the for loop which checks for the element before binding an event to that element... which i just did by editing the code but it still doesn't works... — Taha
– Taha, Commented Feb 5, 2018 at 17:56

Ele · Accepted Answer · 2018-02-05 17:52:31Z

3

You have two main problems

You're using an undeclared variable event

function removeFromList(e) {
  event.target.parentNode.outerHTML = "";
  ^

You need to bind the click event to your new element.

Look at this code snippet with those fixes.

<body>
  <input type="text" id="txt_input">
  <input type="submit" value="Add" id="txt_submit">

  <script>
    txt = document.getElementById('txt_input');
    submit = document.getElementById('txt_submit');
    removeBtn = document.getElementsByClassName('remove');

    window.onload = txt.focus();
    submit.onclick = addToList;

    for (var i = 0; i < removeBtn.length; i++) {
      removeBtn[i].onclick = removeFromList;
    }


    function removeFromList(e) {
      e.target.parentNode.outerHTML = "";
    }


    function createRemoveButton(parent) {
      var listBtn = document.createElement('input');
      listBtn.setAttribute('type', 'submit');
      listBtn.setAttribute('value', 'Remove');
      listBtn.setAttribute('class', 'remove');
      listBtn.style.marginLeft = '20px';

      listBtn.addEventListener('click', removeFromList)

      parent.appendChild(listBtn);
    }


    var list;


    function addToList() {
      if (document.querySelector("ul") === null) {
        list = document.createElement('ul');
      }

      var listItem = document.createElement('li');
      var txtNode = document.createTextNode(txt.value);

      listItem.appendChild(txtNode);
      createRemoveButton(listItem);
      list.appendChild(listItem);
      document.body.appendChild(list);

      txt.value = '';
      txt.focus();
    }
  </script>
</body>

See? now is removing the element.

answered Feb 5, 2018 at 17:52

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Taha Over a year ago

Thanks .. that solves the problem. i was really stuck over this.

Taha Over a year ago

and now i don't need the for loop to loop through all the elements to bind an event ... that one line of code saved the trouble.. thanx again

Ahmad Hamzavi · Accepted Answer · 2018-02-05 18:19:12Z

 <body>
     <input type="text" id="txt_input">
     <input type="submit" onclick="addToList()" value="Add">

      <script>
       txt = document.getElementById('txt_input');

    window.onload = txt.focus();

    function removeFromList(e) {
      e.target.parentNode.outerHTML = "";
      txt.focus();
    }


    function createRemoveButton(parent) {
      var listBtn = document.createElement('input');
      listBtn.setAttribute('type', 'submit');
      listBtn.setAttribute('value', 'Remove');
      listBtn.setAttribute('class', 'remove');
      listBtn.style.marginLeft = '20px';

      listBtn.addEventListener('click', removeFromList)

      parent.appendChild(listBtn);
    }


    var list;


    function addToList() {
      if (document.querySelector("ul") === null) {
        list = document.createElement('ul');
      }

      var listItem = document.createElement('li');
      var txtNode = document.createTextNode(txt.value);

      listItem.appendChild(txtNode);
      createRemoveButton(listItem);
      list.appendChild(listItem);
      document.body.appendChild(list);

      txt.value = '';
      txt.focus();
    }
  </script>
</body>

Collectives™ on Stack Overflow

Javascript : Event Listener not working

2 Answers 2

You have two main problems

Look at this code snippet with those fixes.

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You have two main problems

Look at this code snippet with those fixes.

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related