Как удалить добавленный элемент, используя remove

Question

У меня есть простой код, который имеет 2 div. один div состоит из одной кнопки, называемой «добавить». Когда его щелкнул, это добавит другую кнопку во второй div. Когда вы нажимаете любую кнопку во втором div, она должна удалить себя. как вы можете видеть в приведенном ниже коде, я добавляю кнопки во втором div, используя append. Вот где мой вопрос. Код работает, если кнопка удаления уже находится в div. (это означает, что он будет удаляться при щелчке). Однако кнопки, которые добавляются, не удаляют себя. Как сделать кнопки добавлены для удаления при нажатии?

<title>AutoSuggestion using Ajax, Jquery and PHP</title> 

<script src="js/jquery-1.11.1.min.js" ></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 


      $('#add').click(function(){ 
       var return_value = "appended button (click to delete me)"; 
       $('.seconddiv').append('<button class ="remove">'+return_value+'</button>'); 


      }); 
      $('.remove').click(function() { 
       $(this).remove(); 

      }); 

}); 


</script> 

<div class="firstdiv"><button id ="add" >add</button></div> 
<div class="seconddiv"><button class ="remove" >click to delete me</button></div> 

Answer 1

Это вопрос перекомпоновка

http://jsfiddle.net/87pt31La/

$(document).ready(function(){ 

    //intial call on load 
    bindFunc() 

    $('#add').click(function(){ 
     var return_value = "appended button (click to delete me)"; 
     $('.seconddiv').append('<button class ="remove">'+return_value+'</button>'); 
     bindFunc() 
    }); 

    //any Js code that needs to be rebinded 
    function bindFunc(){ 
     $('.remove').click(function() { 
       $(this).remove(); 
     }); 
    } 


}); 

При добавлении нового HTML это не переплетены в JS, так что вы должны перепривязывают его.

Answer 2

Вы можете изменить обработчик события click, чтобы прикрепить его к документу.

$(document).on("click", ".remove",function() { 
     $(this).remove(); 
}); 

http://jsfiddle.net/q56odb3r/