biki333209 biki333209 - 4 years ago 77
CSS Question

Take string from inside <li> tag that's been removed via eventListener, and also remove it from array

Making a plain javascript ToDo List. On click/submit, the input value must be pushed to an array via eventListener,inside that a function has to be called which clears out a

<ul>
, looping over the array creating a new
<li>
for each string inside the array. I've done that, only thing is that when I click on each
<li>
to delete it using another eventListener, the
<li>
gets deleted from the HTML, but only the first item in the array gets removed, and not the string value from the
<li>
which corresponds with the array item. I hope that made sense :( thanks in advance!



var taskString = document.getElementById('taskString');

var list = document.getElementById('todoList');

var arr = [];

var submit = document.getElementById('submit');


list.addEventListener('click',function(event){ /////<----- EVENT LISTENER TO DELETE <li> tag
list.removeChild(event.target);
arr.splice(event.target.textContent,1);

});

submit.addEventListener('click', function(evt){ /////<----- EVENT LISTENER FOR THE SUBMIT BUTTON TO SEND INPUT STRING TO AN ARRAY
arr.push(taskString.value);
clear();
evt.preventDefault();

});

document.getElementById('mainForm').addEventListener('submit', function(evt){ // <---- This eventListener sends the string/value of the input to an array, then runs the "clear" function
arr.push(taskString.value);
clear();
evt.preventDefault();


});

function clear(){ ////<----- FUNCTION CLEARS THE <ul>,LOOPS OVER ARRAY PUTTING EACH ITEM IN A LI TAG AND SENDING IT TO THE UL
list.innerHTML = '';
for(var i = 0; i < arr.length; i++){
var task = arr[i];
var liTag = document.createElement('li');
liTag.setAttribute('id',i);
liTag.textContent = task;
list.appendChild(liTag);
taskString.value = '';

}

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="style/styles.css">


</head>
<body class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5 col-sm-2 col-sm-offset-2 col-xs-2 col-xs-offset-2">
<div id="app">
<h1 id="myHdr" class="hdr">TodoList</h1>
<form id="mainForm">
<input type="text" id="taskString">
<button class="center-block" id="submit">Submit</button>
<br>
</form>
<ul id="todoList">
<li class="delete">Default</li>
</ul>
</div>
</div>
</div>




Answer Source

To remove the element from the array when you click on it, you can get the index of the entry by looking for the text in the array with .indexOf(), then calling splice() with that index.

var taskString = document.getElementById('taskString');

var list = document.getElementById('todoList');

var arr = [];

var submit = document.getElementById('submit');

list.addEventListener('click', function(event) { /////<----- EVENT LISTENER TO DELETE <li> tag
  list.removeChild(event.target);
  var idx = arr.indexOf(event.target.textContent)
  arr.splice(idx, 1);
});

submit.addEventListener('click', function(evt) { /////<----- EVENT LISTENER FOR THE SUBMIT BUTTON TO SEND INPUT STRING TO AN ARRAY
  arr.push(taskString.value);
  clear();
  evt.preventDefault();

});

document.getElementById('mainForm').addEventListener('submit', function(evt) { // <---- This eventListener sends the string/value of the input to an array, then runs the "clear" function
  arr.push(taskString.value);
  clear();
  evt.preventDefault();

});

function clear() { ////<----- FUNCTION CLEARS THE <ul>,LOOPS OVER ARRAY PUTTING EACH ITEM IN A LI TAG AND SENDING IT TO THE UL
  list.innerHTML = '';
  for (var i = 0; i < arr.length; i++) {
    var task = arr[i];
    var liTag = document.createElement('li');
    liTag.setAttribute('id', i);
    liTag.textContent = task;
    list.appendChild(liTag);
    taskString.value = '';

  }

}
<div class="row">
  <div class="col-md-2 col-md-offset-5 col-sm-2 col-sm-offset-2 col-xs-2 col-xs-offset-2">
    <div id="app">
      <h1 id="myHdr" class="hdr">TodoList</h1>
      <form id="mainForm">
        <input type="text" id="taskString">
        <button class="center-block" id="submit">Submit</button>
        <br>
      </form>
      <ul id="todoList">
        <li class="delete">Default</li>
      </ul>
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download