Javascript 如何从动态创建的列表中动态删除项目？

如何从动态创建的列表中删除

这是我想要的示例：

如何创建列表：

$('#button').click(function() {
        var value = $("#id :selected").text();
        var value1 = $("#id :selected").text();
        var value2 = $("#id").val();
        $("#ul").after('<li style="display:list-item; padding:5px;border:2px solid black" name="name[]"><strong>attribute 1:</strong> ' + value + ', <strong>Attribute 2:</strong> ' + value1 + ', <strong>Attribute 3:</strong> ' + value2 + '</li>');

从我所看到的情况来看，一切似乎都是正确的，但我仍然不知道为什么它没有被删除

试试这个：

$(document).on('click', '#ul li', function(e){
    $(this).remove();
});

改变

$("#ul").after('<li style="display:list-item; padding:5px;border:2px solid black" name="name[]"><strong>attribute 1:</strong> ' + value + ', <strong>Attribute 2:</strong> ' + value1 + ', <strong>Attribute 3:</strong> ' + value2 + '</li>');

$（“#ul”）.after（“
属性1:“+value+”，属性2:”+value1+，属性3:“+value2+”
）；

到

$（“#ul”）.append（“
属性1:“+value+”，属性2:”+value1+，属性3:“+value2+”
）；

jQuery将以添加事件侦听器的方式丢失动态创建的元素

1） 第一个主要问题是：

$('#ul').after();

你们在ul后面加上了li，这就是为什么听众有问题的原因

我更改了您的代码，如下所示：

$('document').ready(function(){

$('#button').click(function() {
        var value = "test1";
        var value1 = "test2";
        var value2 = "test3"

        var row = '<li style="display:list-item; padding:5px;border:2px solid black"><strong>attribute 1:</strong> ' + value + ', <strong>Attribute 2:</strong> ' + value1 + ', <strong>Attribute 3:</strong> ' + value2 + '</li>';
        $("#ul").append(row);

       $('#ul li').on('click',function(e){
        $(this).remove();
    });


});  

$（'document'）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
var value=“test1”；
var value1=“test2”；
var value2=“test3”
var row='
属性1:'+value+'，属性2:'+value1+'，属性3:'+value2+'
'；
$（“#ul”）。追加（第行）；
$（'ulli'）。在（'click'，函数（e）上{
$（this.remove（）；
});
});  

---

使用

$（文档）。在（'click'，'ul li'，函数（e）{

委托单击我将其切换到您在示例中所用的方式，但它仍然不起作用。@JessicaMather，您能为问题创建一个小提琴吗？我怀疑

.after（）

因为那会在

\ul

之后附加

li

，所以我把小提琴above@JessicaMather，这是最新的工作小提琴

$('#ul').after();

$('document').ready(function(){

$('#button').click(function() {
        var value = "test1";
        var value1 = "test2";
        var value2 = "test3"

        var row = '<li style="display:list-item; padding:5px;border:2px solid black"><strong>attribute 1:</strong> ' + value + ', <strong>Attribute 2:</strong> ' + value1 + ', <strong>Attribute 3:</strong> ' + value2 + '</li>';
        $("#ul").append(row);

       $('#ul li').on('click',function(e){
        $(this).remove();
    });


});