0

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>
Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
codeworm
  • 35
  • 2

3 Answers3

0

try this

$(document).on('click', 'ul#listItem > li .btn', function(){
    $(this).closest('li').remove();
    return false;
});
Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
nivendha
  • 792
  • 7
  • 16
0

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();
});
Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
  • Thank you :-) just one thing how can i edit this li ? – codeworm May 03 '17 at 06:47
  • @codeworm That would involve a lot more script. Have you tried anything thus far? – Douwe de Haan May 03 '17 at 06:49
  • I have tried this code this working but it edit all thing with in li ' $(document).on('click', 'ul#listItem li button.edit', function() { $(this).closest('li').prop('contenteditable', true); });' – codeworm May 03 '17 at 08:28
  • I think [this question and answer](http://stackoverflow.com/questions/15850303/how-to-make-editable-list-item-using-jquery) will point you in the right direction. Takes a little bit more to setup (because of the extra input you have to put in the `li`, but it is a great way to do this right! – Douwe de Haan May 03 '17 at 08:31
0

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 :)

Ozgar
  • 305
  • 2
  • 14