0

我是 javascript/jquery 的新手，可能需要一些帮助。当我单击测试按钮时，一个新ul的包含 an 的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()
    });
});
4

3 回答 3

0

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

$(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();
    });
});

它被称为委托事件。我不知道确切的名字。

工作小提琴链接。

编辑

id必须是唯一的。

于 2013-02-22T15:03:12.657 回答
0

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

$("body").on("ul#main-list li", 'click', function(){
    $(this).remove()
});
于 2013-02-22T15:27:43.700 回答
0

正如 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();
        }
    });
});

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

我在这里建议的最后一件事是在文本框的值为空时添加一些错误捕获。

于 2013-02-22T15:25:02.890 回答