不使用Javascript函数删除芯片标记

我试图创建一个以单词作为标记的输入，然后允许用户删除它们。每次单击X时，我都会收到一个错误，即

ReferenceError:未定义删除

我不确定我做错了什么。我正在使用以下代码：

HTML:

<div class="ingredients">
  <ul id="list"></ul>
  <input type="text" id="ingredients" placeholder="type and Enter ...">
</div>

Javascript

var txt = document.getElementById('ingredients');
var list = document.getElementById('list');
var items = ['PHP', 'React.js', 'WordPress'];

txt.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    let val = txt.value;
    if (val !== '') {
      if (items.indexOf(val) >= 0) {
        alert('Tag name is a duplicate');
      } else {
        items.push(val);
        render();
        txt.value = '';
        txt.focus();
      }
    } else {
      alert('Please type a tag Name');
    }
  }
});

function render() {
  list.innerHTML = '';
  items.map((item, index) => {
    list.innerHTML += `<li><span>${item}</span><a href="javascript: remove(${index})">X</a></li>`;
  });
}

function remove(i) {
  items = items.filter(item => items.indexOf(item) != i);
  render();
}

window.onload = function() {
  render();
  txt.focus();
}

var txt=document.getElementById（'components'）；
var list=document.getElementById（'list'）；
var items=['PHP'，'React.js'，'WordPress']；
txt.addEventListener（'keypress'，函数（e）{
如果（e.key=='Enter'）{
设val=txt.value；
如果（val！=''）{
if（items.indexOf（val）>=0）{
警报（“标记名称重复”）；
}否则{
物品推送（val）；
render（）；
txt.value=''；
txt.focus（）；
}
}否则{
警报（“请键入标记名”）；
}
}
});
函数render（）{
list.innerHTML=''；
items.map（（项目，索引）=>{
list.innerHTML+=`
${item}
`；
});
}
功能删除（一）{
items=items.filter（item=>items.indexOf（item）！=i）；
render（）；
}
window.onload=函数（）{
render（）；
txt.focus（）；
}

能否尝试将

ready

函数添加到javascript文件中

$(document).ready(function(){
   var txt = document.getElementById('ingredients');
   var list = document.getElementById('list');
   var items = ['PHP', 'React.js', 'WordPress'];
   .......
});

---

看起来像是订购问题。为了安全起见，您可以使用对象来存储全局函数。a而不是使用href use onclick

    function remove(i) {
      items = items.filter(item => items.indexOf(item) != i);
      render();
    }
    function render() {
  list.innerHTML = '';
  items.map((item, index) => {
    list.innerHTML += `<li><span>${item}</span><a href="javascript: LIB.remove(${index})">X</a></li>`;
  });
}

var txt=document.getElementById（'components'）；
var list=document.getElementById（'list'）；
var items=['PHP'，'React.js'，'WordPress']；
txt.addEventListener（'keypress'，函数（e）{
如果（e.key=='Enter'）{
设val=txt.value；
如果（val！=''）{
if（items.indexOf（val）>=0）{
警报（“标记名称重复”）；
}否则{
物品推送（val）；
render（）；
txt.value=''；
txt.focus（）；
}
}否则{
警报（“请键入标记名”）；
}
}
});
功能删除（一）{
items=items.filter（item=>items.indexOf（item）！=i）；
render（）；
}
函数render（）{
list.innerHTML=''；
items.map（（项目，索引）=>{
list.innerHTML+=`
${item}
`；
});
}
window.LIB={
移除：移除，
渲染：渲染
}
window.onload=函数（）{
render（）；
txt.focus（）；
}

当我在这里粘贴相同的代码时，我不知道那里出了什么问题。它工作得很好。。

window.LIB = {
  remove:remove,
  render: render
}