Удаление Li не работает для динамического li

Question

Ниже приведен мой сценарий, в котором я создаю li onclick кнопки, но проблема заключается в том, что лики, созданные после нажатия кнопки добавления, не удаляются, когда я нажимаю кнопку удаления. Пожалуйста, дайте мне знать, что я сделал неправильно

<p> 
     <ul class=""> 
     <li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li> 
     </ul> 
     </p> 
     <p> 
     <input type="button" name="butadd" id="butadd" value="+ Add New" /> 
     </p> 

    $(document).ready(function() { 


      $('.liDelete').click(function() { 
     li = $(this).parent(); 
     li.remove(); 
    }); 


     $("#butadd").click(function() { 
      $("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>"); 

     }); 
    }); 

Answer 1

Попробуйте это: .on событие.

демоhttp://jsfiddle.net/mT5vw/1/

$(document).ready(function() { 
    $(document).on('click', '.liDelete', function() { 
     li = $(this).parent(); 
     li.remove(); 
    }); 
    $("#butadd").click(function() { 
     $("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>"); 
    }); 
}); 

Answer 2

Вы должны использовать event delegation, поскольку, когда обработчик регистрируется динамических элементов не существует.

$('ul').on('click', '.liDelete', function() { 
    var li = $(this).parent(); 
    li.remove(); 
}); 

Демо: Fiddle