Как удалить динамические элементы с помощью jquery

Question

Ищете еще раз ваше мнение экспертов о том, как удалить динамические элементы с помощью jquery? Im в настоящее время работает на php-странице с формами с функциональностью для добавления и удаления нового раздела. Теперь у меня возникают проблемы при попытке удалить недавно добавленный раздел с помощью jquery. Поскольку гиперссылка не запускается.

HTML страницы:

<div class="form-group"> 
    <label class="control-label col-md-4">File upload</label> 
    <div class="col-md-6"> 
     <input type="file" /> 
     <textarea required placeholder="Description of the document" class="form-control" name="description-of-incident" id="description-of-incident" rows="2"></textarea> 
     <div class="help-block with-errors"></div><br /> 
     <a href="javascript:void(0);" id="addanother">Add another</a> 
    </div> 
    </div> 

<div id="container"> 
</div> 

и это JQuery я использовал:

$(document).ready(function() { 
     $('input[type="radio"]').click(function() { 
      if($(this).attr('id') == 'peopleinvolvedyes') { 
        $('#involvement-section').show(); 
      } 

      else { 
        $('#involvement-section').hide(); 
      } 
     }); 

     $("#addanother").click(function(){ 
     $("#container").append('<div class="form-group"><label class="control-label col-md-4">File upload</label><div class="col-md-6"><input type="file" /><textarea required placeholder="Description of the document" class="form-control" name="description-of-incident" id="description-of-incident" rows="2"></textarea><div class="help-block with-errors"></div><a href="javascript:void(0);" class="remove-document-upload">Remove</a></div></div>'); 
     }); 

     $(".remove-document-upload").click(function(){ 
      alert("dasdasdas"); 
     //$(this).closest('.addanother').remove(); 
     }); 


    }); 

Всякий раз, когда я получаю нажмите на гиперссылку 'Удалить', функция JQuery не получить срабатывает ,

Комментарии и предложения высоко оценены.

Спасибо, Nhoyti

Answer 1

FIDDLE

$(document).on('click', ".remove-document-upload", function() { 
    alert("dasdasdas"); 

}); 

Используйте событие делегации для динамически созданного элемента.

.on() документация here

Answer 2

$(".remove-document-upload").click(function(){ 
    alert("dasdasdas"); 
    //$(this).closest('.addanother').remove(); 
}); 

Вместо этого прямого использования мыши

$(document).on('click', '.remove-document-upload', function() { 
    $(this).closest('.addanother').remove(); 
}) 

Здесь вам не нужно использовать прямой документ. вы можете использовать любой селектор, который родительский элемент загрузил во время загрузки документа