设置标签

var tagInput = {
    isInited: false,
    init: init,
    bindEvent: bindEvent,
    addTag: addTag,
    removeTag: removeTag
};
tagInput.init();

function init() {
    var that = this;
    if (that.isInited) return;
    that.isInited = true;
    // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
    that.input = document.querySelector('.js-input');
    that.bindEvent();
}

function bindEvent() {
    var that = this;
    var input = that.input;
    if (!input) return;
    input.addEventListener('keydown', function (event) {
        // 请修改这一行代码，判断用户是否按了回车键
        var isEnter = event.keyCode === 13;
        // 请修改这一行代码，判断用户是否按了删除键
        var isDelete = event.keyCode === 8;

        (isEnter || isDelete) && event.preventDefault();
        isEnter && that.addTag();
        isDelete && that.removeTag();
    });
    input.parentNode.addEventListener('click', function () {
        input.focus();
    });
}

function addTag() {
    const text = this.input.value.trim()
    if(text === ''){
         this.input.value = ''
         return
    }
    const spans = this.input.parentNode.querySelectorAll('.tag')
    const found =  Array.from(spans).find(ele => ele.textContent === text)
    if(found) {
        this.input.value = ''
        return 
    }
    const span = document.createElement('span')
    span.classList.add('tag')
    span.innerHTML = text
    this.input.parentNode.insertBefore(span, this.input)
    this.input.value = ''
}

function removeTag() {
    const text = this.input.value
    if(text.length === 0 ){
        const spans = this.input.parentNode.querySelectorAll('.tag')
        if(spans.length > 0){
            this.input.parentNode.removeChild(spans[spans.length - 1])
        }
    }
}

var tagInput = {
    isInited: false,
    init: init,
    bindEvent: bindEvent,
    addTag: addTag,
    removeTag: removeTag
};
tagInput.init();

function init() {
    var that = this;
    if (that.isInited) return;
    that.isInited = true;
    // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
    that.input = document.getElementsByClassName("js-input")[0];
    that.bindEvent();
}

function bindEvent() {
    var that = this;
    var input = that.input;
    if (!input) return;
    input.addEventListener('keydown', function (event) {
        // 请修改这一行代码，判断用户是否按了回车键
        var isEnter = event.keyCode === 13 ? true : false;
        // 请修改这一行代码，判断用户是否按了删除键
        var isDelete = event.keyCode === 8 && !that.input.value ? true : false;

        (isEnter || isDelete) && event.preventDefault();
        isEnter && that.addTag();
        isDelete && that.removeTag();
    });
    input.parentNode.addEventListener('click', function () {
        input.focus();
    });
}

function addTag() {
    var input = this.input;
    let value = input.value.trim();
    if (!value) return;
    let tagList = document.getElementsByClassName("tag");
    tagList = [...tagList].map(tag => tag.innerHTML);
    if (!tagList.includes(value)) {
        let tag = document.createElement("span");
        tag.classList.add("tag");
        tag.innerHTML = value;
        input.parentNode.insertBefore(tag, input)
    }
    input.value = "";
}

function removeTag() {
    let tagList = document.getElementsByClassName("tag");
    if (tagList.length === 0) return;
    let lastTag = tagList[tagList.length - 1];
    this.input.parentNode.removeChild(lastTag);
}

发现一个很有趣的bug，在本地调试的时候
删除键的值并不是8，而是0
如果将keyCode===0可实现输入框删除功能，但不触发方法
改为8则无法输入框删除，但会触发删除方法
var tagInput = {
            isInited: false,
            init: init,
            bindEvent: bindEvent,
            addTag: addTag,
            removeTag: removeTag
        };
        tagInput.init();
        function init() {
            var that = this;
            if (that.isInited) return;
            that.isInited = true;
            // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
            that.input = document.querySelectorAll('.js-input')[0];
            that.bindEvent();
        }
        function bindEvent() {
            var that = this;
            var input = that.input;
            if (!input) return;
            input.addEventListener('keydown', function (event) {
                // 请修改这一行代码，判断用户是否按了回车键
                var isEnter = event.keyCode === 13;
                // 请修改这一行代码，判断用户是否按了删除键
                var isDelete = event.keyCode === 8;
                (isEnter || isDelete) && event.preventDefault();
                isEnter && that.addTag();
                isDelete && that.removeTag();
            });
            input.parentNode.addEventListener('click', function () {
                input.focus();
            });
        }
        function addTag() {
            var that = this;
            var input = that.input;
            input.value = input.value.trim()
            let div = document.querySelectorAll('.tag-input')[0]
            let arr = Array.from(document.querySelectorAll('.tag'))
            let flag = arr.find(item => item.textContent === input.value)
            if (input.value !== '' && !flag) {
                let span = document.createElement('span')
                span.classList.add('tag')
                span.innerText = input.value
                div.insertBefore(span, input)
            }
            input.value = ''
        }
        function removeTag() {
            var that = this;
            var input = that.input;
            let div = document.querySelectorAll('.tag-input')[0]
            let remove = input.previousSibling
            if(remove && !input.value){
                div.removeChild(remove)
            }
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       .tag-input{
    position: relative;
    border: 1px solid #cccccc;
    padding: 0 5px;
    display: flex;
    flex-flow: row wrap;
}
.js-input{
    width: 450px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    padding: 0;
    margin: 5px 0;
    outline: none;
    border: none;
    width: 6.5em;
    height: 24px;
    line-height: 24px;
}
.tag{
    padding: 0 10px;
    margin: 5px 5px 5px 0;
    background: #25bb9b;
    color: #ffffff;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    font-size: 13px;
}
    </style>
</head>

<body>
    <div class="tag-input">
    <span class="tag">前端</span>
    <span class="tag">编程题</span>
    <span class="tag">示例</span>
    <span class="tag">标签</span>
    <input type="text" class="js-input" maxlength="6" placeholder="请输入标签">
</div>
    <script type="text/javascript">
       var tagInput = {
    isInited: false,
    init: init,
    bindEvent: bindEvent,
    addTag: addTag,
    removeTag: removeTag
};
tagInput.init();

function init() {
    var that = this;
    if (that.isInited) return;
    that.isInited = true;
    // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
    that.input = document.querySelector('input');
    that.bindEvent();
}

function bindEvent() {
    var that = this;
    var input = that.input;
    if (!input) return;
    input.addEventListener('keydown', function (event) {
        // 请修改这一行代码，判断用户是否按了回车键
        var isEnter = event.keyCode===13;
        // 请修改这一行代码，判断用户是否按了删除键Backspace
        var isDelete = event.keyCode===8;

        (isEnter || isDelete) && event.preventDefault();
        isEnter && that.addTag();
        isDelete && that.removeTag();
    });
    input.parentNode.addEventListener('click', function () {
        input.focus();
    });
}

function addTag() {
    let svalue = tagInput.input.value.trim();
    if(!svalue)return;
    let stag = document.querySelector('.tag-input');
    let {fragment,isRepet} = commonFunc();
    if(!isRepet){
        let span = document.createElement('span');
        span.classList.add('tag');
        span.innerText = svalue;
        fragment.appendChild(span)
    }
   stag.insertBefore(fragment,tagInput.input);
   tagInput.input.value = '';
}
function commonFunc(del=false){
    let textc = tagInput.input.value.trim();
    let isRepet = false;
    let fragment = document.createDocumentFragment()
    let spans = document.querySelectorAll('span');
    spans.forEach((item,index)=>{
        if(!del){
            fragment.appendChild(item)
        }else if(index!==spans.length-1){
            fragment.appendChild(item)
        }else{
            item.remove()
        }
    })
    if(!del&&Array.from(spans).find(item=>item.innerText===textc)){
        isRepet = true
    }
   return {fragment,isRepet}
}
function removeTag() {
    let sk = tagInput.input.value.trim();
    if(sk){
        tagInput.input.value = sk.slice(0,-1)
    }else{
        let {fragment} =  commonFunc(true);
        let stag = document.querySelector('.tag-input');
            stag.insertBefore(fragment,tagInput.input);
            
    }
}

    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    .tag-input {
      position: relative;
      border: 1px solid #cccccc;
      padding: 0 5px;
      display: flex;
      flex-flow: row wrap;
    }

    .js-input {
      width: 450px;
      height: 22px;
      line-height: 22px;
      font-size: 16px;
      padding: 0;
      margin: 5px 0;
      outline: none;
      border: none;
      width: 6.5em;
      height: 24px;
      line-height: 24px;
    }

    .tag {
      padding: 0 10px;
      margin: 5px 5px 5px 0;
      background: #25bb9b;
      color: #ffffff;
      height: 24px;
      line-height: 24px;
      border-radius: 12px;
      font-size: 13px;
    }
  </style>
</head>

<body>
<div class="tag-input">
  <span class="tag">前端</span>
  <span class="tag">编程题</span>
  <span class="tag">示例</span>
  <span class="tag">标签</span>
  <input type="text" class="js-input" maxlength="6" placeholder="请输入标签">
</div>
<script type="text/javascript">
  var tagInput = {
    isInited: false,
    init: init,
    bindEvent: bindEvent,
    addTag: addTag,
    removeTag: removeTag
  };
  tagInput.init();

  function init() {
    var that = this;
    if (that.isInited) return;
    that.isInited = true;
    // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
    that.input = document.querySelector(".js-input");
    that.bindEvent();
  }

  function bindEvent() {
    var that = this;
    var input = that.input;
    if (!input) return;
    input.addEventListener('keydown', function (event) {
      // 请修改这一行代码，判断用户是否按了回车键
      // console.log(111, event);
      var isEnter = event.keyCode === 13;
      // 请修改这一行代码，判断用户是否按了删除键
      var isDelete = event.keyCode === 8;

      (isEnter || isDelete) && event.preventDefault();
      isEnter && that.addTag();
      isDelete && that.removeTag();
    });
    input.parentNode.addEventListener('click', function () {
      input.focus();
    });
  }

  const labelSet = [];

  function addTag() {
    let input = document.querySelector('.js-input');
    let labelVal = input.value.trim();
    if (!labelVal) return;
    let exist = labelSet.findIndex((label) => label === labelVal);
    if (exist === -1) {
      labelSet.push(labelVal);
      let newSpan = document.createElement('span');
      newSpan.className = 'tag';
      newSpan.innerHTML = labelVal;
      input.parentNode.insertBefore(newSpan, input);
    }
    // 清空输入框
    input.value = '';
  }

  function removeTag() {
    let input = document.querySelector('.js-input');
    let labelVal = input.value;
    if (labelVal) {
      input.value = input.value.slice(0, -1);
    } else {
      labelSet.pop();
      // let tags = document.querySelectorAll('.tag');
      // input.parentNode.removeChild(tags[tags.length - 1]);
      // 评论区更好的写法
      input.previousElementSibling.remove();
    }
  }
</script>
</body>

</html>

var tagInput = {
      isInited: false,
      init: init,
      bindEvent: bindEvent,
      addTag: addTag,
      removeTag: removeTag
    };
    tagInput.init();

    function init() {
      var that = this;
      if (that.isInited) return;
      that.isInited = true;
      // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
      const input = document.querySelector(".js-input");
      that.input = input;
      that.bindEvent();
    }

    function bindEvent() {
      var that = this;
      var input = that.input;
      if (!input) return;
      input.addEventListener('keydown', function (event) {
        // 请修改这一行代码，判断用户是否按了回车键
        console.log(event)

        var isEnter = false;
        if (event.keyCode === 13) isEnter = true
        // 请修改这一行代码，判断用户是否按了删除键
        var isDelete = false;
        if (event.keyCode === 8) {
          isDelete = true
        }

        // (isEnter || isDelete) && event.preventDefault();
        isEnter && that.addTag();
        isDelete && that.removeTag();
      });
      input.parentNode.addEventListener('click', function () {
        input.focus();
      });
    }

    function addTag() {
      var that = this;
      var input = that.input;
      if (!input) return;
      const newSpan = document.createElement('span')
      const oldSpan = document.querySelectorAll('.tag-input .tag')
      const index = Array.from(oldSpan).findIndex((item) => {
        return item.innerText === input.value.trim()
      })
      if (index !== -1) {
        input.value = ''
        return
      }
      newSpan.innerHTML = input.value.trim()
      newSpan.classList.add('tag')
      newSpan.innerHTML && input.parentNode.insertBefore(newSpan, input)
      console.log(newSpan, input.parentNode, Array.from(oldSpan))
      input.value = ''
    }

    function removeTag() {
      var that = this;
      var input = that.input;
      if (!input) return;
      console.log(input.parentNode.children)
      if (!input.value) {
        input.parentNode.removeChild(input.parentNode.children[input.parentNode.children.length - 2])
      }
    }

var tagInput = {
        isInited: false,
        init: init,
        bindEvent: bindEvent,
        addTag: addTag,
        removeTag: removeTag
    };

    tagInput.init();

    function init() {
        var that = this;
        if (that.isInited) return;
        that.isInited = true;
        // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
        that.input = document.querySelector(".js-input");
        that.bindEvent();
    }

    function bindEvent() {
        var that = this;
        var input = that.input;
        if (!input) return;
        input.addEventListener('keydown', function (event) {
            // 请修改这一行代码，判断用户是否按了回车键
            var isEnter = false;
            // 请修改这一行代码，判断用户是否按了删除键
            var isDelete = false;
            
            if(event.keyCode == 13) isEnter = true
            else if(event.keyCode == 8) isDelete = true
            else return 

            (isEnter || isDelete) && event.preventDefault();
            isEnter && that.addTag();
            isDelete && that.removeTag();
        });
        input.parentNode.addEventListener('click', function () {
            input.focus();
        });
    }

    function addTag() {
        let val = this.input.value.trim()
        if(!val.length) return
        let tagInput = document.querySelector('.tag-input')
        let tagList = document.querySelectorAll('.tag');
        for(let i = 0;i < tagList.length; i++){
            if(tagList[i].innerText == val) return this.input.value = ''
        }
        
        let el = document.createElement('span')
        el.className = 'tag'
        el.innerText = val
        tagInput.insertBefore(el, this.input)
        this.input.value = ''
    }

    function removeTag() {
        if(this.input.value.length) return this.input.value = this.input.value.replace(/[\s\S]$/, '')
        let lastTag = document.querySelector('.tag:last-of-type');
        if(lastTag){
            lastTag.remove()
        }
    }

var tagInput = {
        isInited: false,
        init: init,
        bindEvent: bindEvent,
        addTag: addTag,
        removeTag: removeTag,
      };
      tagInput.init();

      function init() {
        var that = this;
        if (that.isInited) return;
        that.isInited = true;
        // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
        that.input = document.querySelector(".js-input");
        that.bindEvent();
      }

      function bindEvent() {
        var that = this;
        var input = that.input;
        if (!input) return;
        input.addEventListener("keydown", function (event) {
          // 请修改这一行代码，判断用户是否按了回车键
          var isEnter = false;
          if (event.keyCode === 13) isEnter = true;
          // 请修改这一行代码，判断用户是否按了删除键
          var isDelete = false;
          // 当点击为删除键，并且输入框为空内容时，isDelete才为true阻止默认删除事件
          if (event.keyCode === 8 && input.value === "") isDelete = true;
          (isEnter || isDelete) && event.preventDefault();
          isEnter && that.addTag();
          isDelete && that.removeTag();
        });
        input.parentNode.addEventListener("click", function () {
          input.focus();
        });
      }

      function addTag() {
        var that = this;
        // 输入的标签值，去空白
        var tagTemp = that.input.value.trim();
        // 判断是否存在已存在的标签
        var isHave = Array.from(document.querySelectorAll(".tag")).some(
          (item) => item.innerText === tagTemp
        );
        if (tagTemp && !isHave) {
          // 有tag元素，则在最后一个tag元素之后插入元素
          if (document.querySelectorAll(".tag").length) {
            document
              .querySelectorAll(".tag")
              [document.querySelectorAll(".tag").length - 1].insertAdjacentHTML(
                "afterend",
                `<span class="tag">${tagTemp}</span>`
              );
          } else {
            // 没有tag则直接在input框前插入
            that.input.insertAdjacentHTML(
              "beforebegin",
              `<span class="tag">${tagTemp}</span>`
            );
          }
        }
        // 清空
        that.input.value = "";
      }

      function removeTag() {
        var that = this;
        var tagTemp = that.input.value;
        // 输入框没有任何值并且里面存在tag元素执行删除
        if (!tagTemp && document.querySelectorAll(".tag").length) {
          document
            .querySelector(".tag-input")
            .removeChild(
              document.querySelectorAll(".tag")[
                document.querySelectorAll(".tag").length - 1
              ]
            );
        }
      }

var tagInput = {
  isInited: false,
  init: init,
  bindEvent: bindEvent,
  addTag: addTag,
  removeTag: removeTag,
}
tagInput.init()

function init() {
  var that = this
  if (that.isInited) return
  that.isInited = true
  // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
  that.input = document.querySelector('.js-input')
  that.bindEvent()
}

function bindEvent() {
  var that = this
  var input = that.input
  if (!input) return
  input.addEventListener('keydown', function (event) {
    console.info(event);
    // 请修改这一行代码，判断用户是否按了回车键
    var isEnter = event.keyCode == 13
    // 请修改这一行代码，判断用户是否按了删除键
    var isDelete = event.keyCode == 8

    ;(isEnter || isDelete) && event.preventDefault()
    isEnter && that.addTag()
    isDelete && that.removeTag()
  })
  input.parentNode.addEventListener('click', function () {
    input.focus()
  })
}

function addTag() {
  //<span class="tag">标签</span>
  let that = this
  if (!that.input.value.trim()) {
    that.input.value = ''
    return false
  }
  let span = document.createElement('span')
  span.innerHTML = that.input.value.trim()
  span.setAttribute('class', 'tag')
  let items = document.querySelectorAll('.tag')
  let flag = false
  // 不能使用es6 <<<<<
  for (let i = 0; i < items.length; i++) {
    let v = items[i]
    if (v.innerHTML == that.input.value) {
      flag = true
    }
  }

  if (flag) {
    that.input.value = ''
    return false
  }
  that.input.parentNode.insertBefore(span, that.input)
  that.input.value = ''
}

function removeTag() {
  let items = document.querySelectorAll('.tag')
  items.length > 0 && !this.input.value.trim() && items[items.length - 1].remove()
}

在Google下：
>> charCode始终为 0
>> 支持which和keyCode，二者的值相同

在Opera下：
>> 支持keyCode和which，二者的值相同
>> 不支持charCode，值为 undefined

    var tagInput = {
        isInited: false,
        init: init,
        bindEvent: bindEvent,
        addTag: addTag,
        removeTag: removeTag
    };
    tagInput.init();

    function init() {
        var that = this;
        if (that.isInited) return;
        that.isInited = true;
        // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
        that.input = document.querySelector('.js-input');
        that.bindEvent();
    }

    function bindEvent() {
        var that = this;
        var input = that.input;
        if (!input) return;
        input.addEventListener('keydown', function (event) {
            // 请修改这一行代码，判断用户是否按了回车键
            var isEnter = event.keyCode === 13 ? true : false
            // 请修改这一行代码，判断用户是否按了删除键
            var isDelete = event.keyCode === 8 ? true : false;

            (isEnter || isDelete) && event.preventDefault();
            isEnter && that.addTag();
            isDelete && that.removeTag();
        });
        input.parentNode.addEventListener('click', function () {
            input.focus();
        });
    }

    function addTag() {
        const that = this
        const input = that.input
        const value = input.value.trim()
        if(value !== ''){
            const tags = document.querySelectorAll('.tag')
            let hasTag = Array.from(tags).every(item => item.innerHTML !== value)
            if(hasTag){
                const newTag = document.createElement('span')
                newTag.innerHTML = value
                newTag.classList.add('tag')
                input.parentNode.insertBefore(newTag,input)
            }
        }
        // 清空输入框
        input.value = ''
    }

    function removeTag() {
        const that = this
        const input = that.input
        const value = input.value
        if(value === ''){
            const tags = document.querySelectorAll('.tag')
            tags[tags.length - 1].remove()
        }else{
            input.value = value.slice(0,value.length-1)
        }
    }

var tagInput = {
    isInited: false,
    init: init,
    bindEvent: bindEvent,
    addTag: addTag,
    removeTag: removeTag
};
tagInput.init();

function init() {
    var that = this;
    if (that.isInited) return;
    that.isInited = true;
    // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
    that.input = document.querySelector('.js-input');
    that.bindEvent();
}

function bindEvent() {
    var that = this;
    var input = that.input;
    if (!input) return;
    input.addEventListener('keydown', function (event) {
        // 请修改这一行代码，判断用户是否按了回车键
        var isEnter = event.keyCode === 13;
        // 请修改这一行代码，判断用户是否按了删除键
        var isDelete = event.keyCode === 8;

        (isEnter || isDelete) && event.preventDefault();
        isEnter && that.addTag();
        isDelete && that.removeTag();
    });
    input.parentNode.addEventListener('click', function () {
        input.focus();
    });
}

function addTag() {
    var tagInput = this.input.parentNode
    var existedTags = tagInput.querySelectorAll('.tag')
    var inputVal = this.input.value.trim()
    if(inputVal.length > 0) {
        for (let i = 0; i < existedTags.length; i++) {
            if(existedTags[i].innerText === inputVal) {
                this.input.value = ''
                return
            } 
        }
        var span = document.createElement('span')
        span.innerText = inputVal
        span.className = 'tag'
        tagInput.insertBefore(span, this.input)
    }
    this.input.value = ''
}

function removeTag() {
    if(this.input.value.trim().length == 0) {
        var tagInput = this.input.parentNode
        var preTag = this.input.previousElementSibling
        preTag && tagInput.removeChild(preTag)
    }
}

var tagInput = {
    isInited: false,
    init: init,
    bindEvent: bindEvent,
    addTag: addTag,
    removeTag: removeTag
};
tagInput.init();

function init() {
    var that = this;
    if (that.isInited) return;
    that.isInited = true;
    console.log(that)
    // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
    that.input = document.getElementsByClassName('js-input')[0];
    that.bindEvent();
}

function bindEvent() {
    var that = this;
    var input = that.input;
    if (!input) return;
    input.addEventListener('keydown', function (event) {
        // 请修改这一行代码，判断用户是否按了回车键
        var isEnter = false;
        if(event.keyCode==13){
            isEnter=true
        }
        // 请修改这一行代码，判断用户是否按了删除键
        var isDelete = false;
        if(event.keyCode==8){
            if(document.getElementsByClassName('js-input')[0].value){
                isDelete=false
            }
            else{
                isDelete=true
            }
        }
        (isEnter || isDelete) && event.preventDefault();
        isEnter && that.addTag();
        isDelete && that.removeTag();
    });
    input.parentNode.addEventListener('click', function () {
        input.focus();
    });
}

function addTag() {
    var input=document.getElementsByClassName('js-input')[0]
    var text=input.value.trim()
    var tags=document.getElementsByClassName('tag')
    let arr=[]
    for(let x of tags){
        arr.push(x.innerText)
    }
    console.log(arr)
    if(text&&arr.indexOf(text)==-1){
        console.log(text)
        var span=document.createElement('span')
        span.setAttribute('class','tag')
        span.innerText=text
        input.before(span)
    }
    input.value=''
}

function removeTag() {
    var contain=document.getElementsByClassName('tag-input')[0]
    var tags=document.getElementsByClassName('tag')
    if(tags.length>0)
    contain.removeChild(tags[tags.length-1])
    else{
        alert('不可以再删除了哦')
    }
    }

function addTag() {
    var parent = this.input.parentElement;
    if(this.input.value.trim()!=''){
        var span = document.createElement('span');
        span.className='tag';
        span.innerHTML = this.input.value.trim();
        parent.insertBefore(span,this.input);
    }
    this.input.value='';
}

function removeTag() {
    var parent = this.input.parentElement;
    if(this.input.value==''){
        parent.removeChild(parent.querySelectorAll('span')[parent.querySelectorAll('span').length-1]);
    }
}

var tagInput = {
  isInited: false,
  init: init,
  bindEvent: bindEvent,
  addTag: addTag,
  removeTag: removeTag
};
tagInput.init();

function init() {
  var that = this;
  if (that.isInited) return;
  that.isInited = true;
  // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
  that.input = document.querySelector('.js-input');
  that.bindEvent();
}

function bindEvent() {
  var that = this;
  var input = that.input;
  if (!input) return;
  input.addEventListener('keydown', function (event) {
    // 请修改这一行代码，判断用户是否按了回车键=13
    var isEnter = event.keyCode === 13;
    // 请修改这一行代码，判断用户是否按了删除键=8
    var isDelete = event.keyCode === 8;
    // event.preventDefault()阻止默认事件 可能在浏览器中input框无法进行删除操作
    (isEnter || isDelete) && event.preventDefault();
    isEnter && that.addTag();
    isDelete && that.removeTag();
  });
  input.parentNode.addEventListener('click', function () {
    input.focus();
  });
}
// 添加为标签
function addTag() {
  var _this = this
  // 获取input输入的值
  var content = _this.input.value.trim()
  if (content === '') {
    _this.input.value = ''
    return
  }
  // 判断标签是否重复
  var tags = _this.input.parentNode.querySelectorAll('.tag')
  var found = Array.from(tags).find(item => item.textContent === content)
  if (found) {
    _this.input.value = ''
    return
  }
  // 将input内容设置为标签
  var span = document.createElement('span')
  span.classList.add('tag')
  span.innerHTML = content
  _this.input.parentNode.insertBefore(span, _this.input)
  _this.input.value = ''
}
// 删除标签
function removeTag() {
  var _this = this
  var content = _this.input.value
  var tags = _this.input.parentNode.querySelectorAll('.tag')
  if (content.length === 0 && tags.length > 0) {
    _this.input.parentNode.removeChild(tags[tags.length - 1])
  }
}

显示系统错误，但自测没问题
var tagInput = {
    isInited: false,
    init: init,
    bindEvent: bindEvent,
    addTag: addTag,
    removeTag: removeTag
};
tagInput.init();
var taginput=document.querySelector('.tag-input')
function init() {
    var that = this;
    if (that.isInited) return;
    that.isInited = true;
    // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
    that.input = document.querySelector('.js-input');
    that.bindEvent();
}

function bindEvent() {
    var that = this;
    var input = that.input;
    if (!input) return;
    input.addEventListener('keydown', function (event) {
        // 请修改这一行代码，判断用户是否按了回车键
        var isEnter
        var isDelete
        if(event.keyCode===13){
            isEnter = true;
        }
        // 请修改这一行代码，判断用户是否按了删除键
        else if(event.keyCode===46){
            isDelete = true;
        }
        (isEnter || isDelete) && event.preventDefault();
        isEnter && that.addTag();
        isDelete && that.removeTag();
    });
    input.parentNode.addEventListener('click', function () {
        input.focus();
    });
}

function addTag() {
    var that=this;
    var tags=taginput.querySelectorAll('.tag')
    var s=that.input.value
    if(s.length===0){
        isEnter=false;
        isDelete=false;
        return 
    }
    that.input.value=(s.match(/\S+/))[0] 
    for(let i=0;i<tags.length;i++){
        if(tags[i].innerHTML===that.input.value){
            that.input.value=''
            isEnter=false;
            isDelete=false;
            return 
        }
    }
    var div = document.createElement("span");
    div.className='tag';
    div.innerHTML=that.input.value;
    taginput.insertBefore(div,that.input);
    that.input.value=''
    isEnter=false;
    isDelete=false;
}

function removeTag() {
    var that=this;
    if(that.input.value){
        isEnter=false;
        isDelete=false;
        return 
    }else{
        var tags=taginput.querySelectorAll('.tag')
        if(tags.length===0){
            isEnter=false;
            isDelete=false;
            return
        }
        taginput.removeChild(tags[tags.length-1])
    }
}