从<li>通过 eventListener 删除的标签内部获取字符串，并将其从数组中删除

制作一个普通的JavaScript待办事项列表。在点击/提交时，输入值必须通过eventListener推送到数组，在里面必须调用一个函数来清除<ul>，循环数组，为数组中的每个字符串创建一个新<li>。我已经这样做了，唯一的问题是，当我单击每个<li>以使用另一个 eventListener 删除它时，<li>从 HTML 中删除，但只有数组中的第一项被删除，而不是与数组项对应的<li>中的字符串值。我希望这是有道理的:(提前感谢！

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>

要在单击数组时从数组中删除元素，可以通过在数组中查找带有 .indexOf() 的文本，然后使用该索引调用splice()来获取条目的索引。

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>

相关内容

最新更新

热门标签：