从列表中删除 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();  
});

记下的代码行是我之前尝试过但没有工作的一些代码。 这是渲染lis的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

我猜删除按钮在li里面？

然后这样做：

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

这将搜索第一个父元素 li 以查找您的情况下单击的元素。