我有此下划线模板用于添加和删除行：

<#
  jQuery( document ).ready( function() {
   jQuery( \'.add-ingr\' ).click( function() {
    jQuery( \'#re-ingr .ingr\' ).append( \'<div><input 
     type="text" name="ingr[]" value=""/><a href="#" 
     class="remove_field" style="margin-left:10px;">Remove</a><div>\');
       });
    jQuery( \'.remove_field\' ).on("click", function(e){ 
      e.preventDefault(); jQuery(this).parent(\'div\').remove();
       });
      });
        #>

添加行和删除链接起作用，它生成良好的html输出：

   <div><input type="text" name="ingredients[]" value=""><a href="#" 
   class="remove_field" style="margin-left:10px;">Remove</a><div></div> 
   </div>

但不是删除，当我点击删除超链接时什么也没有发生任何想法请

jQuery( \'.remove_field\' ).on("click", function(e){ 
    e.preventDefault(); jQuery(this).parent(\'div\').remove();
});

jQuery( \'body\' ).on("click", \'.remove_field\', function(e){ 
    e.preventDefault(); jQuery(this).parent(\'div\').remove();
});

jQuery( \'body\' ).on("click", \'.remove_field\', function(e){
    e.preventDefault(); jQuery(this).parent(\'div\').remove();
});