从列表中删除li的内容并删除li

Question

我试图使用一个按钮使一个li从页面中消失，但是li的内容是一个字符串，它位于一个名为additional-text-list的列表中，而li本身的代码在另一个名为textList的列表中。填充textList的代码如下：

$('#append').on('click', function () {
    var text = $('#new-text').val();
    var bullet = '<li>' + text +  'input type="hidden" name="additionalList" value="'+text+'"/> </li>';
    $('#additional-text-list').append(li);
    $('#new-text').val('');
});

该页面将每个“项目符号”呈现为单独的代码行，创建了一系列项目符号项目，但它还将输入文本添加到名为additionalList的列表中。每当单击按钮时，我希望li消失，文本从additionalList中删除。现在我专注于前一个目标，这就是我所拥有的：

$('#removeText').on('click', 'li>.remove-btn', function (event){
//$(event.currentTarget).closest('li').remove();
$(this).closest.('li').remove();  
});

注意到的那行代码是我之前尝试过的一些代码，但不起作用。这是用于呈现列表的html代码：

<div class="row">
            <ul id ="additional-text-list"> 
        <!-- this ul is where we render the text -->
                <g:each var="additionalList" in="${userInstance.additionalList*.text}">
                    <li class ="text-list-item">
                     <button type="button" title="Remove Text">

                     <i class="fa fa-close" id = "removeText"></i>  </button>
                        ${additionalText} 
                        <input type="hidden" name="additionalText" value="${additionalText}"/>

                    </li>
                </g:each>
            </ul>
        </div>

现在我不在我平常的计算机上，所以请忽略html中的任何拼写错误；我知道它们工作得很好。有没有人对如何删除文本有什么建议？

Answer 1

我猜delete按钮在li内部

然后执行以下操作：

$(this).parents('li:eq(0)');

它将为您所单击的元素搜索第一个父元素li。