javascript - 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 的任何元素的点击事件。当您单击 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