如何删除我的案例

Question

如何删除JavaScript中创建的文本li。 li是在javascript中创建的，点击它们前面的每个按钮它应该只删除那个li而不是全部

function addBook() {
  var userInput = document.getElementById('books').value;
  if (userInput === "") {
    alert("Please Enter A Text");
    return false;
  }

  var book = document.getElementById('addBook');
  var list = document.getElementById('addBook').children;
  var check = -1;
  var btn = document.createElement('button');
  btn.innerHTML = 'X';

  (list.length === 0) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');

  for (var k = 0; k < list.length; k++) {
    console.log(list[k].innerText);
    if (list[k].innerText === userInput + "x") {
      check = 1;
      break;
    }
  }

  (check === -1) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
}

function removeParent(e) {
  var book = document.getElementById('addBook').children;
  book.parentNode.parentNode.removeChild(e.parentNode);

}

<div class="col-md-4 form-cont">
  <h3>Favourite Books </h3>
  <caption>Enter Book's name:</caption> <input type="text" id="books" class="form-control" required="required">
  <button onclick="addBook()" class="btn btn-success">Add Book</button>
  <ol type="i" id="addBook">
  </ol>
  <h3 id="h">Hoobies</h3>
</div>

Answer 1

book不是Element，而是Element 的列表

简单使用e代替book

function removeParent(e) {
  e.parentNode.parentNode.removeChild(e.parentNode);
}

<强>演示

function addBook() {
  var userInput = document.getElementById('books').value;
  if (userInput === "") {
    alert("Please Enter A Text");
    return false;
  }

  var book = document.getElementById('addBook');
  var list = document.getElementById('addBook').children;
  var check = -1;
  var btn = document.createElement('button');
  btn.innerHTML = 'X';

  (list.length === 0) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');

  for (var k = 0; k < list.length; k++) {
    console.log(list[k].innerText);
    if (list[k].innerText === userInput + "x") {
      check = 1;
      break;
    }
  }

  (check === -1) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
}

function removeParent(e) {
  e.parentNode.parentNode.removeChild(e.parentNode);
}

<div class="col-md-4 form-cont">
  <h3>Favourite Books </h3>
  <caption>Enter Book's name:</caption> <input type="text" id="books" class="form-control" required="required">
  <button onclick="addBook()" class="btn btn-success">Add Book</button>
  <ol type="i" id="addBook">
  </ol>
  <h3 id="h">Hoobies</h3>
</div>

Answer 2

修改removeParent函数，如下所示：

function removeParent(e) {
  var book = document.getElementById('addBook');
  book.removeChild(e.parentNode);
}

function addBook() {
  var userInput = document.getElementById('books').value;
  if (userInput === "") {
    alert("Please Enter A Text");
    return false;
  }

  var book = document.getElementById('addBook');
  var list = document.getElementById('addBook').children;
  var check = -1;
  var btn = document.createElement('button');
  btn.innerHTML = 'X';

  (list.length === 0) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');

  for (var k = 0; k < list.length; k++) {
    console.log(list[k].innerText);
    if (list[k].innerText === userInput + "x") {
      check = 1;
      break;
    }
  }

  (check === -1) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
}

function removeParent(e) {
  var book = document.getElementById('addBook');
  book.removeChild(e.parentNode);
}

<div class="col-md-4 form-cont">
  <h3>Favourite Books </h3>
  <caption>Enter Book's name:</caption> <input type="text" id="books" class="form-control" required="required">
  <button onclick="addBook()" class="btn btn-success">Add Book</button>
  <ol type="i" id="addBook">
  </ol>
  <h3 id="h">Hoobies</h3>
</div>

Answer 3

你只需要使用“e”参数，它直接指向你点击的元素：

<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a>

ħ

function removeParent(e) {   
    e.parentNode.parentNode.removeChild(e.parentNode);
}