Question

我是javascript / jquery的新手，可能需要一些帮助。当我单击测试按钮时，包含ul的新li将附加到正文中，并带有输入字段的值。单击li元素时，应将其删除。如果ul内没有任何内容，则应将其删除。如何让代码创建无序列表一次然后插入li？另外，当我点击它们时，如何继续删除li？

这是我现在的代码：

<input type="text" value="" id="text" />
<input type="button" id="test" value="Test" />

$(document).ready(function(){
    $("#test").click(function(){
        var t = document.getElementById("text").value;
        var UL = document.createElement('ul')
        var LI = document.createElement('li')
        $(UL).attr('id','main-list').appendTo(body)
        $(LI).appendTo("#main-list").text(t)
    });
    $("ul#main-list li").click(function(){
        $(this).remove()
    });
});

Answer 1

你需要一种不同的选择器。

$(document).ready(function () {
    i = 0;
    $("#test").click(function () {
        var t = $('#text').val();
        var UL = document.createElement('ul');
        var LI = document.createElement('li');
        $(UL).attr('id', 'main-list' + i).appendTo('body');
        $(LI).text(t).appendTo("#main-list"+i);
        i++;
    });
    $(document).on('click', "ul li", function () {
        $(this).remove();
    });
});

它被称为delegated event。我不知道确切的名字。

工作小提琴link。

修改

id必须是唯一的。

Answer 2

As Dream Eater提到您需要使用on添加点击事件，除非您每次添加LI时都要添加点击处理程序。

要完成剩下的问题，您需要做一些事情。

如果您要在列表为空时删除列表，则不能盲目地删除列表项。要执行此操作，您需要检查每次单击项目时列表中剩余的项目数。如果只有一个，则需要删除列表以及单击中的项目。

此外，如果您要在每次单击测试按钮时创建新列表，则表明您拥有正确的脚本，但听起来您希望拥有一个列表。要完成此操作，您需要在创建列表之前检查列表是否存在。

最后，我修改了你的代码以获得jQuery方法的语法优势，我想出了这个：

$(document).ready(function(){
    $("#test").click(function(){
        var t = $('#text').val();
        var LI = $('<li/>');

        if($('#main-list').length == 0){
            var UL = $('<ul/>');
            UL.attr('id','main-list');
            $('body').append(UL)
        }
        LI.text(t).appendTo('#main-list');
        LI.appendTo("#main-list").text(t);
    });
    $(document).on('click', "#main-list li", function(){
        if($('#main-list').children('li').length ==1)
        {
            $(this).remove();
            $('#main-list').remove();
        }else{
            $(this).remove();
        }
    });
});

This example演示了它的工作原理。通过每次单击按钮时首先检查列表是否存在，您只能获得一个列表。通过检查单击项目时列表中是否只有一个LI，您可以轻松捕获“删除最后一项”单击。

我建议的最后一件事是add some error trapping，当文本框的值为空时。

Answer 3

只需做一个小改动就足够了：

$("body").on("ul#main-list li", 'click', function(){
    $(this).remove()
});

单击时将文本插入ul li

3 个答案:

修改