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

你几乎没有什么问题。首先，当您创建新项目时，您的标记不正确。您缺少输入标记的左方括号。另外，我更改了delete的代码，以便它侦听li元素下具有类remove-btn的任何项上的单击事件。当您单击li中的remove链接时，这应该会删除该项。

$(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