如何实现这个删除功能

Question

我试图做一个删除按钮，删除所有介于按钮是里面的李标签。

$(document).ready(function() { 

    $('#Adicionar1').click(function() { 
     $('#list1').append("<li>"+ $("#Texto1").val() +"<button>remover</button>" +"</li>"); 
$("#Texto1").val("");   
    }); 

    $('button').click(function() { 


    }); 


}); 

代码： http://jsfiddle.net/bdMAF/917/

Answer 1

那么你不能将事件添加到一个不存在的元素。您需要在添加按钮或使用事件委派时附加事件。

$('#list1').on("click", "li button", function() { //listen for click on button 
    $(this) //the button that was clicked 
     .closest("li") //find the li element 
     .remove();  //remove the li 
}); 

Answer 2

我会使用jQuery的.parent()功能，使data属性使用：

$(document).ready(function() { 
 

 
    $('.Adicionar').click(function() { 
 
     console.log($(this).data("listid")); 
 
     console.log($(this).data("textid")); 
 
     
 
     $("#"+$(this).data("listid")).append("<li>"+   $("#"+$(this).data("textid")).val() +'<button class="remove">remover</button>' +"</li>"); 
 
     
 
    $("#"+$(this).data("textid")).val("");  
 
     $('.remove').on("click",function() {  
 
      $(this).parent().remove(); 
 
     }); 
 
    }); 
 

 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<h3>TEMAS A APRENDER</h3> 
 
<input id= "Texto1" type="text" name="" value=""> 
 
    <button class="Adicionar" data-listid="list1" data-textid="Texto1">Adicionar</button> 
 
<ul id="list1"></ul> 
 

 
<h3>TEMAS APRENDIDOS</h3> 
 
<input id= "Texto2" type="text" name="" value=""> 
 
    <button class="Adicionar" data-listid="list2" data-textid="Texto2">Adicionar</button> 
 
<ul id="list2"></ul>

Answer 3

类似的答案，一个上面：http://jsfiddle.net/bdMAF/920/

HTML

<span class="delegateAnchor"> 
    <h3>TEMAS A APRENDER</h3> 

    <input id="Texto1" type="text" name="" value=""> 
    <button id="Adicionar1">Adicionar</button> 
    <ul id="list1"></ul> 

    <h3>TEMAS APRENDIDOS</h3> 

    <input id="Texto2" type="text" name="" value=""> 
    <button id="Adicionar2">Adicionar</button> 
    <ul id="list2"></ul> 
</span> 

的Javascript

$(document).ready(function() { 
    var $list1 = $('#list1'); 
    var $text1 = $("#Texto1"); 

    $('#Adicionar1').click(function() { 
     var $li = $('<li>'); 
     $li.append($text1.val()).append("<button>remover</button>"); 
     $list1.append($li); 
     $text1.val(''); 
    }); 

    $('.delegateAnchor > ul').on('click', 'button', function() { 
     $(this).parent().remove(); 
    }); 
});