When clicked insert text into ul li

Question

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

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

You need a different kind of selector.

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

It is known as delegated event. I didn't know the exact name.

Working fiddle link.

EDIT

The id must be unique.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 22 '13 at 15:03

hjpotter92

78,589
36
144
183

This fails to address the rest of the question. The OP said the UL should be removed after the last item is removed and they also asked how to create the list only once. – Pow-Ian Feb 22 '13 at 15:27
hmm, what is "i" what u added to my code? is it somekind of shorter version of for loop? – ints Feb 24 '13 at 11:46
@user1847112 It is a global variable, to get unique `id` generated for your `ul` tag. – hjpotter92 Feb 24 '13 at 12:39

Pow-Ian · Answer 2 · 2013-02-22T15:30:05.680

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.

score 0 · Answer 3 · answered Feb 22 '13 at 15:27

0

Just a small change is enough:

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

answered Feb 22 '13 at 15:27

Starx

77,474
47
185
261

When clicked insert text into ul li

3 Answers3

EDIT

Linked