title: Bootstrap Tags Input - values doesn't get removed from tagsinput
body: <p>I am trying to remove input value from <code>bootstrap-tags-input</code> manually  whenever <code>x</code> button is clicked but values doesn't gets change nor from <em>array</em> neither from <em>inputs</em> .</p>
  <p>This is <strong>code</strong> which i have tried :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('input').tagsinput({
    allowDuplicates: true
  });
  //on click of remove button
  $(document).on("click", ".label-info span[data-role=remove]", function() {
    //remove that spn
    var to_remove = $(this).closest(".label-info").clone().children().remove().end().text().trim()
    console.log($("[name=tags]").val())
    //if i put here inisde split `,` not working as well
    var values = $("[name=tags]").val().split(';')
    console.log("to remove ---" + to_remove)
    $(this).closest(".label-info").remove()
    console.log("input box values--" + $("[name=tags]").val())
    for (var i = 0; i &lt; values.length; i++) {
      if (values[i] == to_remove) {
        values.splice(i, 1);
        return true;
      }
    }
    console.log("after splice--" + values)
    $(this).closest(".label-info").remove()
    $("[name=tags]").val(values)
    console.log("After setting new values--" + $("[name=tags]").val())
  })
  
  $('input').on('beforeItemRemove', function(e) {
    e.cancel = true; //set cancel to false..
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.label-info {
    background-color: #17a2b8;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous"
  /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;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"&gt;&lt;/script&gt;
  
  &lt;input type="text" data-role="tagsinput" name="tags" class="form-control"&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I think values which i am getting from input box is not right i.e : not in correct format because when i do <code>values.length</code> after splitting it always give value as <code>1</code> .</p>
  <p><em><strong>Edit 1</strong></em> :</p>
  <p>I tried using <code>split(',')</code> it is removing data from array but not printing any <code>console</code> result after for loop code and values inside input box doesn't <code>remove</code> as well .</p>
  <p><strong>Updated code</strong> :</p>
  <pre><code>$(document).on(&quot;click&quot;, &quot;.label-info span[data-role=remove]&quot;, function() {
    var to_remove = $(this).closest(&quot;.label-info&quot;).clone().children().remove().end().text().trim()
    console.log($(&quot;[name=tags]&quot;).val())
    var values = $(&quot;[name=tags]&quot;).val().split(',')
    console.log(&quot;to remove ---&quot; + to_remove)
    $(this).closest(&quot;.label-info&quot;).remove()
    console.log(&quot;input box values--&quot; + $(&quot;[name=tags]&quot;).val())
    for (var i = 0; i &lt; $(&quot;[name=tags]&quot;).val().split(',').length; i++) {
      if (values[i] == to_remove) {
        values.splice(i, 1);
        console.log(&quot;i am in&quot;)
        return;
      }
    }
    //why thse consoles do not get printed ??
    console.log(&quot;after splice--&quot; + values)
    $(this).closest(&quot;.label-info&quot;).remove()
    $(&quot;[name=tags]&quot;).val(values)
    console.log(&quot;After setting new values--&quot; + $(&quot;[name=tags]&quot;).val())
  })
  </code></pre>
  <p>Thank you for helping .</p>