Bootstrap Tags Input删除重复标签时批量删除问题求助

Hey there, I get exactly what you're dealing with—when you enable allowDuplicates: true for Bootstrap Tags Input, deleting one duplicate tag wipes out all instances of that value. That's super frustrating, right? The root issue is that the component's default delete logic targets tags by their value, not the specific DOM element you clicked on. Let's fix that with a simple custom handler.

Why This Happens #

The built-in remove method checks for all tags matching the value you're trying to delete, so when you click the close button on one "22" tag, it finds every "22" tag and removes them all. We need to override this to target only the tag the user actually clicked.

The Solution #

Add this custom click handler after initializing the tagsinput. It intercepts the delete action, removes only the selected tag, and updates the input's underlying data correctly:

$('input').tagsinput({ allowDuplicates: true });

// Fix to delete only the selected duplicate tag
$(document).on('click', '.bootstrap-tagsinput .label .remove', function(e) {
    e.preventDefault(); // Stop the default delete-all behavior
    
    // Grab the specific tag element the user clicked
    const $tag = $(this).closest('.label');
    const tagText = $tag.text().trim();
    const $input = $tag.closest('.bootstrap-tagsinput').prev('input[data-role="tagsinput"]');
    
    // Remove the tag from the UI first
    $tag.remove();
    
    // Update the input's internal tag list
    const currentTags = $input.tagsinput('items');
    // Find the first occurrence of the tag value (we just need to remove one instance)
    const tagIndex = currentTags.indexOf(tagText);
    
    if (tagIndex !== -1) {
        currentTags.splice(tagIndex, 1); // Remove one instance from the array
        
        // Refresh the tagsinput with the updated list
        $input.tagsinput('removeAll');
        currentTags.forEach(tag => $input.tagsinput('add', tag));
    }
});

Full Working Code #

Here's your complete code with the fix included, ready to use:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous" />
<style type="text/css">
    .bootstrap-tagsinput { width: 100%; } 
    .label-info { background-color: #17a2b8; } 
    .label { 
        display: inline-block; 
        padding: .25em .4em; 
        font-size: 90%; 
        font-weight: 700; 
        line-height: 1; 
        text-align: center; 
        white-space: nowrap; 
        vertical-align: baseline; 
        border-radius: .25rem; 
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; 
    } 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js" integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg==" crossorigin="anonymous"></script>

<div class="row mt-5">
    <div class="col-md-6 offset-3 mt-5">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h2><strong>Bootstrap 4 Tag Input Example</strong></h2>
            </div>
            <div class="card-body">
                <label>Tags :</label>
                <input type="text" data-role="tagsinput" name="tags" class="form-control">
            </div>
        </div>
    </div>
</div>

<script>
$('input').tagsinput({ allowDuplicates: true });

// Fix to delete only the selected duplicate tag
$(document).on('click', '.bootstrap-tagsinput .label .remove', function(e) {
    e.preventDefault();
    const $tag = $(this).closest('.label');
    const tagText = $tag.text().trim();
    const $input = $tag.closest('.bootstrap-tagsinput').prev('input[data-role="tagsinput"]');
    
    $tag.remove();
    
    const currentTags = $input.tagsinput('items');
    const tagIndex = currentTags.indexOf(tagText);
    
    if (tagIndex !== -1) {
        currentTags.splice(tagIndex, 1);
        $input.tagsinput('removeAll');
        currentTags.forEach(tag => $input.tagsinput('add', tag));
    }
});
</script>

How It Works #

1. Prevents Default Action: Stops the component from deleting all tags with the same value.
2. Targets Specific Tag: Grabs the exact tag element the user clicked to remove.
3. Updates Internal Data: Adjusts the input's tag array to remove only one instance of the tag value.
4. Refreshes UI: Clears all tags and re-adds the updated list to keep the UI in sync with the data.

Now when you add two "22" tags and delete one, only the clicked one will disappear—perfect!

内容的提问来源于stack exchange，提问作者Mani Singh