Чип-теги не удаляются с помощью функции Javascript

Question

Я пытаюсь создать вход со словами в качестве тегов, а затем разрешить пользователю удалить их. Каждый раз, когда нажимается 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();
}

Answer 1

СМОТРЕТЬ, КАК ПРОБЛЕМА ЗАКАЗА. В целях безопасности вы можете использовать объект для хранения глобальной функции. Вместо href используйте 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>`;
  });
}

// Все функции

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

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 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: void 0" onclick="LIB.remove(${index})">X</a></li>`;
  });
}
window.LIB = {
  remove:remove,
  render: render
}


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

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

Answer 2

Можете ли вы попытаться добавить функцию ready к вашему javascript файлу

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