I have an HTML structure and I want to remove an additional item.
<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>
I have jQuery code also:
$("input.pro-credit-user").last().on('tokenfield:removetoken', function (e) {
$(this).closest('span').remove(); // not working
})
When the user removes the token I also wanted to remove the span which has class 'pro-credit-error'. I have written jQuery but it's not working.
How can I remove that span which contains 'pro-credit-error' class?
Below code works for me:
$("input.pro-credit-user").last().on('tokenfield:removetoken', function (e) {
$(e.relatedTarget).parent().prev().parent().find('span.pro-credit-error:eq(0)').remove();
})