Список дел в Javascript, в котором элементы списка не удаляются при нажатии на крестик

Question

Список дел в Javascript, в котором элементы списка не удаляются при нажатии на крестик

1

Приложение "Список дел", в котором ожидающие задачи добавляются в упорядоченный список.

При нажатии на крест-кнопку ничего не происходит, тогда как функция onclick delElement() для кросс-кнопки определена.

Было бы здорово, если бы кто-то мог указать на ошибку.

Код HTML и Javascript предоставляется below-

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>

WebEnthusiast 04 авг. 2018, в 15:35

Источник

0

Было бы полезно на самом деле придумать сценарий И HTML, или вы просто просите людей угадать. Еще лучше, примером могут служить люди.
mpm 04 авг. 2018, в 13:21
0

@mpm Добавлено! Должен ли я добавить код CSS тоже?
WebEnthusiast 04 авг. 2018, в 13:34

Теги:

javascript

2 ответа

0

Добавьте 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>

Javascript Lover - SKT 04 авг. 2018, в 11:18

Ещё вопросы

Было бы полезно на самом деле придумать сценарий И HTML, или вы просто просите людей угадать. Еще лучше, примером могут служить люди.
@mpm Добавлено! Должен ли я добавить код CSS тоже?

Sabyasachi Patra · Accepted Answer · 2018-08-04T11-26-00.000Z

Добавление функции события onclick на deleteButton в качестве анонимной функции делает трюк.

Код 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 = "";

  }

Да, это сработало. Любое объяснение, почему предыдущий вызов функции не работал?
Я предполагаю, что "deleteButton.onclick = 'delElement ()';" назначал функцию в виде строки.