削除されたタブに一致するテキストフィールドの入力テキストを削除します

Question

この例では、keyupイベントを使用しているため、入力された各入力テキスト（カンマで区切られます）はタブに変換されます。私は削除するタブに従ってテキストフィールドから入力テキストを削除したい。たとえば、「アイテム1」と入力しても、突然変更して「アイテム1」タブを削除すると、削除されたタブのtextContentに一致する文字列がテキストフィールドに自動的に削除されるはずですテキストフィールド。

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

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

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

どのように私はその機能を可能にすることができますか？

Answer 1

はこの1つに「X」ボタンのリスナーを置き換えます

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で、この複雑さをコーディング。あなたは仕事を終わらせるでしょうが、それは難しいです！