Question

在我做的这个例子中，由于它使用了keyup事件，所输入的每个输入文本（用逗号分隔）都被转换为一个标签。我希望根据我删除的选项卡从文本字段中删除输入文本;例如，我输入＆＃34;项目1＆＃34;但我突然改变主意，决定删除＆＃34;项目1＆＃34;选项卡，文本字段中包含与已删除选项卡的textContent匹配的字符串的输入文本应自动从文本字段中删除。

＆＃13;

var query = document.querySelector.bind(document);

query('#textfield').addEventListener('keyup', addTag);

function addTag(e) {
  var evt = e.target;

  if(evt.value) {
    var items = evt.value.split(',');

    if(items.length <= 10) {
      evt.nextElementSibling.innerHTML = null;

      for(var i = 0; i < items.length; i++) {
        if(items[i].length > 0) {
          var label = document.createElement('label'),
              span = document.createElement('span');
          
          label.className = 'tag';
          label.textContent = items[i];

          span.className = 'remove';
          span.title = 'Remove';
          span.textContent = 'x';

          label.insertAdjacentElement('beforeend', span);

          evt.nextElementSibling.appendChild(label);

          span.addEventListener('click', function() {
            var currentElement = this;

            currentElement.parentNode.parentNode.removeChild(currentElement.parentNode);
          })
        }
      }
    }
  } else {
    evt.nextElementSibling.innerHTML = null;
  }
}

＆＃13;

section {
  width: 100%;
  height: 100vh;

  background: orange;

  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 50%;
}

input[name] {
  width: 100%;
  border: none;
  border-radius: 1rem 1rem 0 0;
  font: 1rem 'Arial', sans-serif;
  padding: 1rem;
  background: #272727;
  color: orange;
  box-shadow: inset 0 0 5px 0 orange;
}

input[name]::placeholder {
  font: 0.9rem 'Arial', sans-serif;
  opacity: 0.9;
}

.tags {
  width: 100%;
  height: 250px;
  padding: 1rem;
  background: #dfdfdf;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 5px 25px 0px rgba(0,0,0,0.4);
  position: relative;
}

.tags > label {
  width: auto;
  display: inline-block;
  background: #272727;
  color: orange;
  font: 1.1rem 'Arial', sans-serif;
  padding: 0.4rem 0.6rem;
  border-radius: .2rem;
  margin: 5px;
}

.tags > label > span {
  font-size: 0.7rem;
  margin-left: 10px;
  position: relative;
  bottom: 2px;
  color: #ff4d4d;
  cursor: pointer;
}

＆＃13;

<section id="tags-input">
  <div class="container">
    <input type="text" name="items" id="textfield" placeholder="Enter any item, separated by comma(','). Maximum of 10" autofocus>
    <div class="tags"></div>
  </div>
</section>

＆＃13;

如何才能使该功能成为可能？

Answer 1

替换＆＃39; x＆＃39;这个按钮监听器：

span.addEventListener('click', function () {
    var text_field = document.getElementById("textfield");
    var evt = this.parentNode;
    var tags = text_field.value;
    this.parentNode.removeChild(this); // remove the 'x' span so you can get the pure tag text with .innerHTML
    var evname = evt.innerHTML;
    var tags_array = tags.split(",");
    var tag_position = tags_array.indexOf(evname);
    if(tag_position > -1)
        tags_array.splice(tag_position,1);
    text_field.value = tags_array.join(',');
    evt.parentNode.removeChild(evt);
})

//当有jQuery时，用纯javascript编码这种复杂性......就像用叉子吃汤一样。你会完成工作，但这很难！

删除与删除的选项卡匹配的文本字段中的输入文本

1 个答案: