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

你几乎没有问题。首先，当您创建新项目时，您的标记不正确。您错过了输入标记的左括号。此外，我更改了删除代码，以便它在remove-btn元素下的类li的任何项目上侦听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

Jquery从列表中删除元素

1 个答案: