Bootstrap 标签输入 - 值不会从标签输入中删除

Question

我正在尝试在单击 x 按钮时手动从 bootstrap-tags-input 中删除输入值，但值不会更改，也不会从 array 中删除输入 .

这是我试过的代码 :

$('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">

我认为我从输入框中获得的值不正确，即：格式不正确，因为当我在拆分后 values.length 时，它总是给出 1 的值。

编辑 1 :

我尝试使用 split(',') 它正在从数组中删除数据，但在 for 循环代码和输入框内的值也不 remove 之后不打印任何 console 结果。

更新代码：

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

感谢您的帮助。

Answer 1

来自 bootstrap-tagsinput source code 第 133 行：

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

这意味着您在文本框中输入的值将保存到您看到的内部对象中，如 tagsinput。如果在不更改内部对象的情况下更改输入框的值，则不会同步文本和内部对象。这样你就不会删除任何值。此外，文本框是隐藏的，您可以看到并使用 div.

而不是通过以下方式获取值：

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

您可以使用 tagsinput 数据对象的 itemsArray 属性:

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

现在您可以直接使用这个数组。

为了删除元素，您可以使用 .index() 而不是 for 循环：

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

片段：

$('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">

Answer 2

你在for循环中写return。它退出功能。所以有些代码无法执行。在split(";") 的第一个代码中，字符串没有";"所以它没有分裂。因此在 for 循环中 values[i] == to_remove 永远不会为真，所以 return 不会执行。使用 break 退出 for 循环。如果不是所有相同的值都将被删除。

$('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">

Answer 3

您输入的值保存在“tagsinput”对象中。

如某些回复中所述，每次更改输入时，您都可以更新文本和对象。

但可能最好的方法 是完全放弃您正在加载的 tagsinput 插件，并用另一个可以为您处理的插件替换它。

例如，here你可以简单地使用editable选项来达到你的目的，你可以在最新的Bootstrap中使用纯JavaScript 5 ，如果您也希望放弃 jQuery（我推荐），但即使使用 jQuery，这个仍然有效。

Bootstrap 标签输入 - 值不会从标签输入中删除

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

html

javascript

jquery

bootstrap-tags-input