单击时将文本插入ul li [英] When clicked insert text into ul li

问题描述

我是javascript/jquery新手，可能需要一些帮助.当我单击测试按钮时，包含li的新ul将随输入字段的值一起添加到主体中.单击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()
    });
});
 

解决方案

正如Dream Eater所述，您需要使用on添加click事件，除非每次添加LI时都要添加click处理程序.

要完成其余的问题，您需要做一些事情.

如果要在列表为空时也要删除列表，则不能盲目地删除列表项.为此，您需要检查每次单击一个项目时列表中还剩下多少个项目.如果只有一个，则需要删除列表以及单击中的项目.

此外，如果您每次单击测试"按钮时都要创建一个新列表，则您具有正确的脚本，但这听起来像您希望有一个列表.为此，您需要在创建列表之前检查列表是否存在.

最后，我修改了您的代码以利用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，您可以轻松捕获删除最后一个项目"的点击.

我在这里建议的最后一件事是添加一些错误捕获功能，文本框为空.

I'm new to javascript/jquery and could need some help. When I click on the test button a new ul containing an li is appended into the body with the value of the input field. When clicked on the li element it should be removed. If there is nothing inside the ul, it should be also removed. How can I make the code to create unordered list once and then insert li's inside? Also, how should I proceed to remove a li when I click on them?

This is the code I have now:

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

解决方案

As Dream Eater mentioned you need to Add the click event using on unless you are going to add a click handler each time you add an LI.

To accomplish the rest of your question you need to do a few things.

You can't just blindly remove the list items if you are going to also remove the list when it is empty. To do this you need to be checking to see how many items remain in the list each time you click an item. If there is only one, then you need to remove the list as well as the item in the click.

Furthermore if you are going to create a new list each time you click the test button you have the right script, but it sounds like you desire to have a single list. To accomplish this you need to check if the list exists before you create it.

Finally I modified your code to take syntactical advantage of jQuery methods and I came up with this:

$(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 demonstrates how it works. By checking first to see if the list exists each time you click the button, you only get one list. By checking if there is only one LI in the list when clicking an item, you can easily capture the 'remove last item' click.

The last thing I would suggest here is to add some error trapping for when the value of the text box is empty.

这篇关于单击时将文本插入ul li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！