SOURCE

document.getElementById("btn").onclick = function() {
  var text = document.getElementById("text");
  var li = document.createElement("li");
  var button = document.createElement("button");
  li.innerHTML = text.value;
  button.innerHTML = "x";
  li.appendChild(button);
  document.getElementsByTagName("ul")[0].appendChild(li);
  /*1、
            button.onclick = function () {
                button.parentNode.parentNode.removeChild(li);
            };*/
  //2、.addEventListener()注册事件
  button.addEventListener('click', function() {
    //button.parentNode.parentNode.removeChild(li);
    //this方法
    this.parentNode.parentNode.removeChild(this.parentNode);
  });

  li.addEventListener('click', function() {
      
    //单击
    if (button.style.display == 'block') {
      button.style.display = 'none';

    } else {
      button.style.display = 'block';

    }
    console.log('a',button.style.display);
    //为什么这种要双击删除符号才能出来?get
     //20210610重看了下，发现点击第一次打印display:"";
    /*
    if (button.style.display == 'none') {
      button.style.display = 'block';

    } else {
      button.style.display = 'none';

    }
    */
  });

};

<div class="container">
  <input type="text" id="text" value="111" />
  <button type="submit" id="btn">
    点击添加
  </button>
  <ul>
  </ul>
</div>

        ul {
          margin: 0px;
          padding: 0px;
        }
        
        ul li {
          width: 300px;
          height: 25px;
        }
        
        ul button {
          display: none;
          float: right;
        }