JavaScript

I am trying to remove input value from bootstrap-tags-input manually whenever x button is clicked but values doesn’t gets change nor from array neither from inputs .

This is code which i have tried :

$('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 < 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..
});

.label-info {
  background-color: #17a2b8;
}

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

<input type="text" data-role="tagsinput" name="tags" class="form-control">

I think values which i am getting from input box is not right i.e : not in correct format because when i do values.length after splitting it always give value as 1 .

Edit 1 :

I tried using split(',') it is removing data from array but not printing any console result after for loop code and values inside input box doesn’t remove as well .

Updated code :

$(document).on("click", ".label-info span[data-role=remove]", function() {
  var to_remove = $(this).closest(".label-info").clone().children().remove().end().text().trim()
  console.log($("[name=tags]").val())
  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 < $("[name=tags]").val().split(',').length; i++) {
    if (values[i] == to_remove) {
      values.splice(i, 1);
      console.log("i am in")
      return;
    }
  }
  //why thse consoles do not get printed ??
  console.log("after splice--" + values)
  $(this).closest(".label-info").remove()
  $("[name=tags]").val(values)
  console.log("After setting new values--" + $("[name=tags]").val())
})

Thank you for helping .

Answer

From bootstrap-tagsinput source code at line number 133:

// register item in internal array and map
  self.itemsArray.push(item);

That means the values you input into the text box are saved into an internal object you see as tagsinput. If you change the values of input box without changing the internal object you don’t synchronize the text and internal object. This way you don’t remove any value. Moreover, the text box is hidden and you see and act with a div.

Instead to get values with:

var values = $("[name=tags]").val().split(';')

you can use the itemsArray property of tagsinput data object:

var values = $("[name=tags]").data('tagsinput').itemsArray;

Now you can work directly with this array.

In order to remove the element you can use .index() instead of for loop:

var idx = $(this).closest(".label-info").index();
values.splice(idx, 1);

The snippet:

$('input').tagsinput({
    allowDuplicates: true
});
//on click of remove button
$(document).on("click", ".label-info span[data-role=remove]", function () {


    var values = $("[name=tags]").data('tagsinput').itemsArray;
    console.log(values);
    console.log("input box values--" + $("[name=tags]").val());

    // synchronize  internal object and input text
    var idx = $(this).closest(".label-info").index();
    values.splice(idx, 1);
    $("[name=tags]").val(values);

    //remove that spn
    $(this).closest(".label-info").remove();

    console.log("after splice--" + values)
    console.log("After setting new values--" + $("[name=tags]").val())
})

$('input').on('beforeItemRemove', function (e) {
    e.cancel = true; //set cancel to false..
});

.label-info {
    background-color: #17a2b8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>

<input type="text" data-role="tagsinput" name="tags" class="form-control">

Bootstrap Tags Input – values doesn’t get removed from tagsinput

Advertisement

Answer