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

您必须使用Delegated事件处理程序。

委派的事件处理程序的优势在于，它们可以处理来自以后在添加到文档中的后代元素的事件。

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

更改：

$('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>

{{1}}

我如何在与li相同的行上创建删除按钮，删除同一行上的li

1 个答案: