刪除，然後從UL

我通過給來自輸入框輸入，並且通過jquery的，但加入li我添加了一個刪除按鈕後附加在li數據創建li編輯動態創建的禮，但它的工作原理，但刪除所有li通過點擊任何刪除按鈕。我怎樣才能一一刪除。還有一件事我怎樣才能編輯這些li通過點擊？刪除，然後從UL

這是代碼：

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

這是HTML：

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

來源

2017-05-03 codeworm

試試這個

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

來源

2017-05-03 06:36:02 nivendha

'li.btn'和'$（ '這'）'??真的很認真.......... – Jai

sry，關於'typo'，感謝編輯 – nivendha

使用此JavaScript來一次全部捕獲：

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

單擊文檔中的任意位置（完整窗口）時，它會檢查目標是否與列表中的按鈕（選擇器ul#listItem li button.btn）匹配。然後查找最接近的li，它是按鈕周圍的那個，並將其刪除，包括按鈕本身。

你的整個代碼變成如下

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

來源

2017-05-03 06:36:09

謝謝:-) 只是一件事我該如何編輯這個li？ – codeworm

@codeworm這將涉及更多的腳本。你到目前爲止嘗試過什麼嗎？ –

我試過這個代碼這個工作，但它編輯中的所有東西 '$（document）.on（'click'，'ul＃listItem li button.edit'，function（）{ \t \t $（this ）.closest（'li'）。prop（'contenteditable'，true）; \t \t}）;' – codeworm

變化

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

要：

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

應該工作:)

來源

2017-05-03 06:46:19 Ozgar

刪除，然後從UL

回答

相關問題