Question

我必须能够使用jquery操纵列表。我已经创建了一个包含元素的列表：

$(document).ready(function() {
  $("#lista1").on('click', 'canc', function() {
    $ogg1 = $(this).closest('li');
    $ogg1.remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">
  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1"> Carne </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill">X</button>
  </li>
  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2"> Pesce </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill">X</button>
  </li>
</ul>

现在，我想在按Delete键时删除一个元素，并且整个列表向后移动。我该怎么办？

Answer 1

这里有两个问题。首先，您的canc选择器缺少#选择器的id前缀。其次，您正在id元素上创建重复的button属性，这是无效的。相反，您应该使用通用类，如下所示：

$(document).ready(function() {
  $("#lista1").on('click', '.canc', function() {
    $ogg1 = $(this).closest('li');
    $ogg1.remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">
  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1">Carne</p>
    <button class="mod badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button class="canc badge badge-primary badge-pill">X</button>
  </li>
  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2">Pesce</p>
    <button class="mod badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button class="canc badge badge-primary badge-pill">X</button>
  </li>
</ul>

Answer 2

对取消按钮使用类而不是ID并使用以下代码

  $(".canc").click(function () {
    $(this).closest("li").remove();
   });

<ul id="lista1" class="list-group">

    <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id="elem1"> Carne </p>
        <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
        <button  class="badge badge-primary badge-pill canc">X</button>

    </li>

    <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
        <p id="elem2"> Pesce </p>
        <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
        <button class="badge badge-primary badge-pill canc">X</button>

    </li>

</ul>

Answer 3

请参见以下示例，

function fnDelete(obj) {
    obj.closest("li").remove()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">

  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1"> Carne </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill" onclick="fnDelete(this)">X</button>

  </li>

  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2"> Pesce </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill" onclick="fnDelete(this)">X</button>

  </li>

</ul>

Answer 4

由于ID是唯一标识的属性，因此我为两个删除按钮添加了 Remove 类。删除按钮的onclick我正在删除当前对象的父节点。就这样。注意：对于多个控件，最好不要使用相同的ID。如果我错了纠正我。

$(document).ready(function(){
    $(".Remove").click(function(){
        $(this).parent().remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="lista1" class="list-group">
  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1"> Carne </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill Remove">X</button>
  </li>
  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2"> Pesce </p>
    <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id="canc" class="badge badge-primary badge-pill Remove">X</button>
  </li>
</ul>

</body>
</html>

删除列表中的项目

4 个答案: