Question

待办事项列表应用程序，将待处理任务添加到有序列表中。

单击十字按钮没有任何反应，而已定义了十字按钮的onclick delElement（）函数。

如果有人可以指出错误，那就太好了。

HTML和Javascript代码如下-

function newElement() {

  var newli = document.createElement("li");

  var inputValue = document.getElementById("InputText").value;

  var label = document.createElement("label");

  label.innerText = inputValue;

  newli.appendChild(label);

  var deleteButton = document.createElement("button");

  deleteButton.innerText = "X";

  deleteButton.id = "delete";

  deleteButton.onclick = "delElement()";

  newli.appendChild(deleteButton);

  var PendingTasks = document.getElementById("pending-tasks");

  if (inputValue === '') {

    alert("You must write something!");

  } else {

    PendingTasks.appendChild(newli);

  }

  document.getElementById("InputText").value = "";

}


function delElement() {

  var listItem = this.parentNode;

  var ol = listItem.parentNode;

  ol.removeChild(listItem);

}

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="jsfile.js"></script>

<div class="jumbotron jumbotron-fluid text-white text-center">

  <div class="container">
    <h1 class="display-1 font-weight-bold">TO DO</h1>
  </div>
</div>
<div class="InputBox">
  <input type="text" name="NewTask" placeholder="Input a new task" id="InputText">
  <input type="submit" onclick="newElement()" value="Add" class="addbtn">
  <br>
</div>

<div style="background-color: #fffdd0">
  <h2 class="title">Pending Tasks</h2>
  <ol id="pending-tasks">
  </ol>
</div>

Answer 1

在 deleteButton 上添加 onclick 事件函数作为匿名函数即可。

JavaScript代码：

  function newElement() {

    var newli = document.createElement("li");

    var inputValue = document.getElementById("InputText").value;

    var label = document.createElement("label");

    label.innerText = inputValue;

    newli.appendChild(label);

    var deleteButton = document.createElement("button");

    deleteButton.innerText = "X";

    deleteButton.id = "delete";

    deleteButton.onclick = function() {

      var listItem = this.parentNode;

      var ol = listItem.parentNode;

      ol.removeChild(listItem);
    };
    newli.appendChild(deleteButton);

    var PendingTasks = document.getElementById("pending-tasks");

    if (inputValue === '') {

      alert("You must write something!");

    }

    else {

      PendingTasks.appendChild(newli);

    }

    document.getElementById("InputText").value = "";

  }

Answer 2

将Event listener本身添加到删除按钮中，下面是工作示例

function newElement() {

  var newli = document.createElement("li");

  var inputValue = document.getElementById("InputText").value;

  var label = document.createElement("label");

  label.innerText = inputValue;

  newli.appendChild(label);

  var deleteButton = document.createElement("button");

  deleteButton.innerText = "X";

  deleteButton.id = "delete";

  deleteButton.addEventListener('click', function() {
    var listItem = this.parentNode;

    var ol = listItem.parentNode;

    ol.removeChild(listItem);
  });

  newli.appendChild(deleteButton);

  var PendingTasks = document.getElementById("pending-tasks");

  if (inputValue === '') {

    alert("You must write something!");

  } else {

    PendingTasks.appendChild(newli);

  }

  document.getElementById("InputText").value = "";

}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="jumbotron jumbotron-fluid text-white text-center">

  <div class="container">
    <h1 class="display-1 font-weight-bold">TO DO</h1>
  </div>
</div>
<div class="InputBox">
  <input type="text" name="NewTask" placeholder="Input a new task" id="InputText">
  <input type="submit" onclick="newElement()" value="Add" class="addbtn">
  <br>
</div>

<div style="background-color: #fffdd0">
  <h2 class="title">Pending Tasks</h2>
  <ol id="pending-tasks">
  </ol>
</div>

Java待办事项列表，其中单击十字按钮不会删除列表项

2 个答案: