隐藏删除按钮<span>并在单击JavaScript时删除<li>

Question

1. 我想在onclick时显示任务标题，它也给我“删除” text(span)。当用户单击每个列表时，我试图显示我的任务而不删除它...但是它不起作用。

2. 我还想在用户单击remove button时删除每个列表。您能给我一些提示吗？我尝试了多种方法..但是它不起作用：（

我已经附上了待办事项应用的图片。

我先感谢了！

var title = document.getElementById('title');
var list = document.getElementById('list');
var li = list.getElementsByTagName('li');

var addBtn = document.getElementById('add-btn');
var i;

var span = document.getElementsByTagName('span');

var listspan = document.getElementById('list-span');
list.addEventListener('click', activeItem);

function activeItem(event) {
  if (event.target.nodeName == 'LI') {
    document.getElementById("list-span").style.visibility = "";
    title.innerHTML = event.target.innerText;
    for (var i = 0; i < event.target.parentNode.children.length; i++) {
      event.target.parentNode.children[i].removeAttribute('class');
    }
    event.target.setAttribute('class', 'active');
  }
}


addBtn.addEventListener('click', function() {
  var txt = prompt('add task');
  list.innerHTML += '<li>' + txt + '<span>' + "REMOVE" + '</span>' + '</li>';
  list.addEventListener('click', activeItem);
});

<section class="container">


  <div class="header-div">
    <h1 id='title'>ADD A TASK</h1>
  </div>

  <div class="button-div">
    <button id="add-btn">ADD A TASK</button>
  </div>

  <div class="list-div">
    <ul id='list'>
      <li>Walk my dog<span id="list-span">remove</span></li>
      <li>Go grocery shopping<span id="list-span">remove</span></li>
      <li>Call mom<span id="list-span">remove</span></li>
      <li>Do laundry<span id="list-span">remove</span></li>
      <li>Call Jane<span id="list-span">remove</span></li>
      <li>Eat lunch<span id="list-span">remove</span></li>

    </ul>
  </div>
</section>