Bootstrap Tags Input - values doesn't get removed from tagsinput-Twitter bootstrap

Swati
December 31, 2020
137 views
2 votes
3 Answers

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 .

Answers

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

You write return in for loop. It exit function. So some code can not execute.
In the first code when split(";"), string dose not have ";" so it is not splited.
Thus in for loop values[i] == to_remove never be true, so return does not execute. Use break to exit for loop. If not all same values will be removed.

$('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()
    var valuesString =$("[name=tags]").val();
    console.log(valuesString);
    var values = valuesString.split(',');
    console.log("before remove ---" + values)
    console.log("to remove ---" + to_remove)
    $(this).closest(".label-info").remove()
    console.log("input box values--" + $("[name=tags]").val())
    var i = $(this).closest(".label-info").index();
    values.splice(i, 1);
    //for (var i = 0; i < values.length; i++) {
    //  if (values[i] == to_remove) {
    //     values.splice(i, 1);
    //     break;
       //      return true;
    //  }
    //}
    console.log("after splice--" + values);
    $(this).closest(".label-info").remove();
    $("[name=tags]").val(values);
    $("[name=tags]").data('tagsinput').itemsArray = 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">

- FilipKapusta
- April 5, 2022 at 10:28 am
- 0 votes
0
The values you input are saved in a "tagsinput" object.

You could update both the text and an object every time you change an input as mentioned in some of the replies.

But probably the best way to do it would be to ditch the tagsinput plugin you are loading altogether, and replace it with a different one that will handle this for you.

For example, here you can simply use the editable option to achieve your goal, and you can use it with pure JavaScript in the latest Bootstrap 5, if you would also prefer to ditch jQuery (which I recommend), but even with jQuery, this one still works.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Bootstrap Tags Input – values doesn't get removed from tagsinput-Twitter bootstrap

Answers