jQuery从列表中删除元素

Question

我在JQuery中有一个名为AdditionalInfo的列表，该列表使用此JQuery函数填写：

$('#append').on('click', function () {
//check if the following area is valid before moving on, check the jquery validation library
    var text = $('#new-email').val();
    var li = '<li>' + text +  'input type="hidden" name="additionalInfo" value="'+text+'"/> </li>';
    $('#additional-info-list').append(li);
    $('#new-email').val('');
});

该功能的重点不仅在于将信息存储在以后可以使用的列表中，还在于呈现带有信息文本的<li> 。 现在，我在每个<li>上都有另一个按钮，按下该按钮可使li消失，但是我还需要向其添加代码，以完全从AdditionalInfo列表中删除信息文本。 到目前为止，这是我为该方法编写的代码：

$('#removeEmail').on('click', 'li>.remove-btn', function (event){

$(event.currentTarget).closest('li').remove();

});

如何从li中获取信息文本段，然后将其从AdditionalInfo中删除？

Answer 1

你有几个问题。 首先，当您创建新项目时，您的标记不正确。 您缺少输入标签的左括号。 我也更改了删除代码，以便它在li元素下的类remove-btn上侦听任何项目的click事件。 单击li内的删除链接时，这应该删除该项目。

$(function(){

  $('#append').on('click', function () {

    var text = $('#new-email').val();
    var li = '<li>' + text +  '<input type="hidden" name="additionalInfo" 
                      value="'+text+'"/>
               <a href="#" class="remove-btn" >remove</a></li>';
    $('#additional-info-list').append(li);
    $('#new-email').val('');

  });

  $(document).on('click', 'li>.remove-btn', function (event){
     var _this =$(this);
     _this.closest('li').remove(); 
  });

});

这是一个工作的jsfiddle