Unable to keep duplicate tag when removing same name tag

686 Views Asked by At

hi i am using Bootstrap Tags Input in my application and i have add

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

in my code its working fine and its allow to add multiple same value. but i tried to remove one tag but its remove all the same tag.

any idea how to ignore removing all same tags. i want one time remove only this tag not all tag with same value thanks.

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

This is my code. Add two number like 22,22 and remove one tag 22. But it's removing both 22.

$('input').tagsinput({
  allowDuplicates: true
});
<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>
<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"
/>

<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>

0

There are 0 best solutions below