javascript - 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 循环代码和输入框内的值之后不打印任何 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">