Jquery 删除列表中的项目_Jquery_Html_List

Jquery 删除列表中的项目

jquery html list

Jquery 删除列表中的项目,jquery,html,list,Jquery,Html,List,我必须能够使用jquery操作列表。我已经创建了一个包含元素的列表： $（文档）.ready（函数（）{ $（“#列表1”）。在（'click'，'canc'，function（）上{ $ogg1=$（this）.closest（'li'）； $ogg1.remove（）； }); }); 卡恩修改 X Pesce 修改 X 这里有两个问题。首先，您的canc选择器缺少id选择器的#前缀。其次，在按钮元素上创建重复的id属性，这是无效的。相反，您应该使用公共类，如下所示： $（

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

$（文档）.ready（函数（）{
$（“#列表1”）。在（'click'，'canc'，function（）上{
$ogg1=$（this）.closest（'li'）；
$ogg1.remove（）；
});
});



卡恩
修改
X


Pesce
修改
X

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

$（文档）.ready（函数（）{
$（“#lista1”）。on（'click'，'.canc'，function（）{
$ogg1=$（this）.closest（'li'）；
$ogg1.remove（）；
});
});



卡恩
修改
X


Pesce
修改
X

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

$（文档）.ready（函数（）{
$（“#lista1”）。on（'click'，'.canc'，function（）{
$ogg1=$（this）.closest（'li'）；
$ogg1.remove（）；
});
});



卡恩
修改
X


Pesce
修改
X

对取消按钮使用类而不是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>    

$（“.canc”）。单击（函数（）{
$（this）.最近的（“li”）.remove（）；
});


卡恩
修改
X


Pesce
修改
X


取消按钮使用类而不是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>    

$（“.canc”）。单击（函数（）{
$（this）.最近的（“li”）.remove（）；
});


卡恩
修改
X


Pesce
修改
X


参见下面的示例

功能fnDelete（obj）{
对象最近的（“li”）.remove（）
}



卡恩
修改
X


Pesce
修改
X

参见下面的示例

功能fnDelete（obj）{
对象最近的（“li”）.remove（）
}



卡恩
修改
X


Pesce
修改
X

由于ID是唯一标识的属性，我为两个删除按钮添加了删除类。单击“删除”按钮后，我将删除当前对象的父节点。这就是全部。注意：对于多个控件，在中使用相同的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>

$（文档）.ready（函数（）{
$（“.Remove”）。单击（函数（）{
$（this.parent（）.remove（）；
});
});


卡恩
修改
X


Pesce
修改
X


由于ID是唯一标识的属性，我为两个delete按钮添加了Remove类。单击“删除”按钮后，我将删除当前对象的父节点。这就是全部。注意：对于多个控件，在中使用相同的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>

$（文档）.ready（函数（）{
$（“.Remove”）。单击（函数（）{
$（this.parent（）.remove（）；
});
});


卡恩
修改
X


Pesce
修改
X


您的jquery代码尝试在哪里？您的意思是，“#canc”，
？您的jquery代码尝试在哪里？您的意思是，“#canc”，
？OP说“我必须能够用jquery操作列表”，所以删除当前使用的jquery，而不是嵌入到