删除内容时删除 span 标签

Question

我有一个 HTML 结构，我想删除一个额外的项目。

<div class="tokenfield form-control">
    <input class="pro-credit-user" name="pro-credit-users[]" placeholder="Person or business name" style="position: absolute; left: -10000px;" tabindex="-1" type="text">
    <input style="position: absolute; left: -10000px;" tabindex="-1" type="text">
    <div class="token invalid">
        <span class="token-label" style="max-width: 152px;">dfgdfgdf</span>
        <a href="#" class="close" tabindex="-1">×</a>
    </div>
    <input class="token-input ui-autocomplete-input" autocomplete="off" placeholder="Person or business name" id="1479230390171168-tokenfield" tabindex="0" style="min-width: 60px; width: 1237.4px;" type="text">
</div>

<a class="delete-pro-credit" href="#">Delete</a>
<span class="pro-credit-error" style="color:red;float:right">Sorry, this user cannot be found. We will not be able to link this persons name with an Enjoius account</span>

我还有jQuery代码：

$("input.pro-credit-user").last().on('tokenfield:removetoken', function (e) {
    $(this).closest('span').remove(); // not working
})

当用户删除令牌时，我还想删除具有 class 'pro-credit-error' 的范围。我已经写了 jQuery 但它不起作用。

如何删除包含 'pro-credit-error' class 的跨度？

Answer 1

closest 通过向上遍历其在 DOM 树中的祖先来工作。在这种情况下，您要删除的 span 不是它的祖先

虽然没有测试你可以试试这个

 $("input.pro-credit-user").last().on('tokenfield:removetoken', function (e) {
              $(this).parent().sibling('span.pro-credit-error').remove();
            })

Answer 2

试试这个

$(this).next('span').remove();

Answer 3

下面的代码适合我：

$("input.pro-credit-user").last().on('tokenfield:removetoken', function (e) {
             $(e.relatedTarget).parent().prev().parent().find('span.pro-credit-error:eq(0)').remove();
            })

删除内容时删除 span 标签

Remove span tag when something removed

javascript

jquery

bootstrap-tokenfield