javascript - 如何使删除按钮与 li 位于同一行删除同一行的 li

Question

我有一个待办事项应用程序。删除按钮不会删除同一行的 li 元素...我该怎么做？我尝试了不同的方法，但没有任何效果...代码中的方法仅在我按下第一个 li 元素按钮时删除，但我想随机删除。

我的代码:

function adauga() {
  var inp = document.getElementById('usr').value;
  var list = document.getElementById('lista1');
  var li = document.createElement('li');
  var lungime =     document.getElementById("lista1").getElementsByTagName('li').length;
  for(var i = 0; i < lungime ; i++) {
    li.setAttribute("id",i);
  }
  li.appendChild(document.createTextNode(inp));

  var button = document.createElement("button");
  button.innerHTML = "Delete";
  button.setAttribute("class","btn btn-primary");
  button.setAttribute("onclick","sterge()");
  button.setAttribute("id","ste");
  li.appendChild(button);
  list.appendChild(li);

}

function sterge() {
  $('#ste').on('click', function(){
    $(this).parent().remove();
  });
}

<link rel="stylesheet" type="text/css" href="stil.css">
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="centru">
  <div class="row">
    <div class="col-lg-12">
      <h2>TO DO LIST</h2>
    </div>
  </div>

<div class="row">
  <div class="col-lg-6">
    <input type="text" class="form-control" id="usr" placeholder="Input task...">
  </div>
  <div class="col-lg-6">
    <button type="button" class="btn btn-primary" onclick="adauga()">Primary</button>
  </div>
</div>

  <div class="row">
    <div class="col-lg-12">
    <ul class="list-group" id="lista1">

    </ul>
    </div>
  </div>

</div>

当我单击与 li 位于同一行的按钮时，我希望 li 消失。

Answer 1

您必须使用委托(delegate)事件处理程序。

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.

属性id在文档中必须是唯一的。使用class而不是id。

更改:

$('#ste').on('click',function(){

至

$('body').on('click', '.ste', function(){

function adauga() {
  var inp = document.getElementById('usr').value;
  var list = document.getElementById('lista1');
  var li = document.createElement('li');
  var lungime =     document.getElementById("lista1").getElementsByTagName('li').length;
  for(var i = 0; i < lungime ; i++) {
    li.setAttribute("id",i);
  }
  li.appendChild(document.createTextNode(inp));

  var button = document.createElement("button");
  button.innerHTML = "Delete";
  button.setAttribute("class","btn btn-primary");
  button.setAttribute("onclick","sterge()");
  button.setAttribute("class","ste");
  li.appendChild(button);
  list.appendChild(li);

}

function sterge() {
  $('body').on('click', '.ste', function(){
    $(this).parent().remove();
  });
}

<link rel="stylesheet" type="text/css" href="stil.css">
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="centru">
  <div class="row">
    <div class="col-lg-12">
      <h2>TO DO LIST</h2>
    </div>
  </div>

<div class="row">
  <div class="col-lg-6">
    <input type="text" class="form-control" id="usr" placeholder="Input task...">
  </div>
  <div class="col-lg-6">
    <button type="button" class="btn btn-primary" onclick="adauga()">Primary</button>
  </div>
</div>

  <div class="row">
    <div class="col-lg-12">
    <ul class="list-group" id="lista1">

    </ul>
    </div>
  </div>

</div>