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。

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

1 个答案: