从ul中删除和编辑动态创建的li

Question

I am creating li by giving input from inputbox and appending the data in li by using jquery but after adding the li I have added a delete button, but it works, but deleting all li by clicking any delete button. How can I delete one by one. And one more thing how can I edit those li by clicking?

This is the code:

$('#submit').on('click', function(){
    var $item = $('#addList').val();

    if($item.trim() == ''){
        alert('please enter the value');
    } else {
        $('ul#listItem').append('<li>'+ $item + '<button class="btn">delect</button>' + '</li>');

        $(document).on('click', '.btn', function(){
            $('ul#listItem > li').remove();
            return false;
        });
    }

    $item = $('#addList').val(' ');
});

This is the html:

<form>
    <input type="text" id="addList">
    <input type="button" id="submit" value="Add">
</form>

Answer 1

try this

$(document).on('click', 'ul#listItem > li .btn', function(){
    $(this).closest('li').remove();
    return false;
});

Answer 2

Use this JavaScript to capture all at once:

$(document).on('click', 'ul#listItem li button.btn', function() {
    $(this).closest('li').remove();
});

When clicking anywhere in your document (complete window), it checks wether the target matches the selector ul#listItem li button.btn , which are the buttons in your list. It then looks for the closest li , which is the one around the button, and removes it, including the button itself.

Your whole code becomes as following

$('#submit').on('click', function(){
    var $item = $('#addList').val();

    if($item.trim() == '') {
        alert('please enter the value');
    } else {
        $('ul#listItem').append('<li>'+ $item + '<button class="btn">delect</button>' + '</li>');

    }
    $item = $('#addList').val(' ');
});

$(document).on('click', 'ul#listItem li button.btn', function() {
    $(this).closest('li').remove();
});

Answer 3

Change

$(document).on('click', '.btn', function(){
     $('ul#listItem > li').remove();
     return false;
});

To:

$(document).on('click', '.btn', function(){
    $(this).parent("li").remove();
    return false;
});

Should work :)