javascript - 单击按钮后会显示列表编号，并且在使用 JavaScript 清除列表后也不会减少

Question

8我基本上需要在下面的代码中清除2个疑惑。

1. 我的 JavaScript 代码没有显示列表的总数，它仅在单击“添加”按钮后显示。

2. 使用符号关闭列表项后，列表项x总数保持不变，应该减少。

//Add list item function HTML
function add1() {
  var newLi = document.createElement("LI");
  var inputValue = document.getElementById("inpuT1").value;
  var textnode = document.createTextNode(inputValue);
  newLi.appendChild(textnode);
  var span = document.createElement("SPAN");
  var textx = document.createTextNode('\u2718');
  span.className = "close_a";
  span.appendChild(textx);
  newLi.appendChild(span);
  if (inputValue == '') {
    alert("Enter a value !");
  } else {
    document.getElementById("myUL1").appendChild(newLi);
  }
  document.getElementById("inpuT1").value = "";
  document.getElementById("close").innerHTML = closeA.length;

  for (i = 0; i < closeA.length; i++) {
    closeA[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

//Close button 
var closeA = document.getElementsByClassName("close_a");
var i;
for (i = 0; i < closeA.length; i++) {
  closeA[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

.close_a {
  position: absolute;
  right: 0px;
  color: black;
  cursor: pointer;
}

.input {
  width: 240px;
  height: 20px;
}

.text {
  position: relative;
  padding: 3px 4px 4px 4px;
  font-size: 17px;
  cursor: pointer;
  border: 1px solid grey;
}

.center {
  text-align: center;
  width: 296px;
  margin-left: 32px;
}

.tabinfo {
  display: block;
  position: absolute;
}

body {
  margin: 0;
  background-color: #70a9ff;
}

.delete {
  text-align: center;
  background-color: #fff;
  margin-left: 40px;
}

<div id="text1" class="tabinfo">
  <div class="center">
    <h1>html</h1>
    <span><input type="text"  id="inpuT1" class="input">&nbsp;<a onclick="add1()" class="text">Add</a></span>
  </div>
  <ul type="none" id="myUL1">
    <li class="checked">To Do list<span class="close_a">&#10008;</span></li>
    <li>Transition Trans anime <span class="close_a">&#10008;</span></li>
    <li>Transform<span class="close_a">&#10008;</span></li>
    <li>Animation<span class="close_a">&#10008;</span></li>
  </ul>
  <div class="delete">Total <b id="close"></b> tabs</div>
</div>