title: Autocomplete Remove Values
body: <p>I'm using the autocomplete and the "<a href="https://github.com/xoxco/jQuery-Tags-Input" rel="nofollow noreferrer">TagsInput</a>" plugin and I'm having a problem that I can not solve. The selected categories pass a value in hidden field (#cat-id), but I can not delete the value when the category is removed. </p>
  
  <p>I would like when removing a category from the input, also delete the value of it in the hidden field.</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>$(document).ready(function (e) {
  
     // Initialize Tags Input
          $('.input-tags').tagsInput({ width: 'auto', height: 'auto'});
  
      $('form[name=form_add]').on('submit',(function(e) {
        e.preventDefault();
  
        var formData = new FormData(this);
        var form = $(this);
  
        $.ajax({
          type:'POST',
          url: 'crud.php',
          data:formData,
          cache:false,
          contentType: false,
          processData: false,
  
          success:function(msg){
            console.log(msg);
  
          },
        });
      }));
  
      var data = [{"value":"1","label":"PHP"},{"value":"2","label":"Python"},{"value":"3","label":"Java"},{"value":"4","label":"ActionScript"},{"value":"5","label":"LUA"}];
  
     // console.log(data);
  
  
      $('#example-tags_tag').autocomplete({
  
  
        source: data,
          
        focus: function( event, ui ) {
         $( "#example-tags_tag" ).val( ui.item.label );
   
         return false;
       },
  
       select: function( event, ui ) {
  
        tagExist = function(c) {
          var d = '#cat-id',
          e = $("#cat-id").val().split(',');
          return jQuery.inArray(c, e) &gt;= 0
        }
   
  
        var verid = tagExist(ui.item.value);
     
  
        if(verid != 1){
          if( $("#cat-id").val() != '')
          {
            $("#cat-id").val( $("#cat-id").val() + ',' + ui.item.value);
          }
          else
          {
            $("#cat-id").val(ui.item.value);
          }
  
        }
  
        else{
  
  
          $("#cat-id").val();
        }
  
        return false;
  
      }
  
    });       
  
  
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  /*
  ==============================================
  (#14tis) Jquery Tags Input
  ==============================================
  */
  
  div.tagsinput {
      background: #ffffff;
      width: 100%;
      height: auto;
      padding: 6px 8px 0;
      border: 1px solid #dbe1e8;
      border-radius: 4px;
  }
  
  div.tagsinput span.tag {
      border: 1px solid #1bbae1;
      background-color: #1bbae1;
      color: #ffffff;
      font-weight: 600;
      border-radius: 2px;
      display: block;
      float: left;
      padding: 0 20px 0 5px;
      height: 20px;
      line-height: 18px;
      text-decoration: none;
      margin-right: 4px;
      margin-bottom: 6px;
      font-size: 12px;
      position: relative;
  }
  
  div.tagsinput span.tag a {
      position: absolute;
      color: #ffffff;
      display: block;
      top: 0;
      right: 5px;
      font-weight: bold;
      text-decoration: none;
      font-size: 12px;
      line-height: 16px;
      height: 20px;
      width: 10px;
      text-align: center;
  }
  
  div.tagsinput span.tag a,
  div.tagsinput span.tag a:hover,
  div.tagsinput span.tag a:focus {
      color: #ffffff;
      text-decoration: none;
  }
  
  div.tagsinput input {
      width: 80px;
      margin: 0px;
      font-family: helvetica;
      font-size: 12px;
      border: 1px solid transparent;
      padding: 0 5px;
      height: 20px;
      line-height: 20px;
      background: transparent;
      outline: 0;
      margin-right: 4px;
      margin-bottom: 6px;
  }
  
  div.tagsinput div {
      display: block;
      float: left;
  }
  
  div.tagsinput:before,
  div.tagsinput:after {
      content:" ";
      display:table;
  }
  
  div.tagsinput:after {
      clear:both;
  }
  
  .not_valid {
      background: #fbd8db !important;
      color: #90111a !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"&gt;&lt;/script&gt;
  
  
    
    &lt;div class="container"&gt;
     &lt;div class="row"&gt;
       &lt;form action="" method="post" enctype="multipart/form-data" id="form-add" name="form_add" class="form-horizontal form-bordered" onsubmit="return false;"&gt;
        &lt;input type='hidden' name='action' value='add'&gt; 
  
        &lt;div class="form-group"&gt;
         &lt;label class="col-md-3 control-label"&gt;Categories&lt;/label&gt;
         &lt;div class="col-md-9"&gt;
           &lt;input type="text" id="example-tags" name="categorie" class="input-tags" value=""&gt;
           &lt;input type="hidden" id="cat-id" name="catid" /&gt;
         &lt;/div&gt;
         e.g.(PHP, Python, Java, ActionScript, LUA)
       &lt;/div&gt;
  
  
  
  
  
       &lt;div class="form-group form-actions"&gt;
         &lt;div class="col-md-9 col-md-offset-3"&gt;
          &lt;button type="submit" class="btn btn-primary" id="envio"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt; Adicionar&lt;/button&gt;
          &lt;button type="reset" class="btn btn-warning"&gt;&lt;i class="fa fa-repeat"&gt;&lt;/i&gt; Reset&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>