JavaScript 实现交互式弹窗：删除列表元素并提交

以下是使用原生JavaScript实现的交互框：

HTML：

<button onclick='showModal()'>打开交互框</button>

<div id='modal' class='modal'>
  <div class='modal-content'>
    <span class='close' onclick='closeModal()'>&times;</span>
    <h2>列表</h2>
    <ul id='list'>
      <li>元素1 <button onclick='deleteItem(this)'>删除</button></li>
      <li>元素2 <button onclick='deleteItem(this)'>删除</button></li>
      <li>元素3 <button onclick='deleteItem(this)'>删除</button></li>
    </ul>
    <div class='buttons'>
      <button onclick='submitModal()'>提交</button>
      <button onclick='closeModal()'>取消</button>
    </div>
  </div>
</div>

CSS：

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.buttons {
  text-align: center;
  margin-top: 20px;
}

button {
  padding: 10px;
  margin: 5px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: black;
  color: white;
}

JavaScript：

// 获取modal元素和列表元素
var modal = document.getElementById('modal');
var list = document.getElementById('list');

// 打开交互框
function showModal() {
  modal.style.display = 'block';
}

// 关闭交互框
function closeModal() {
  modal.style.display = 'none';
}

// 删除列表项
function deleteItem(button) {
  var li = button.parentNode;
  li.parentNode.removeChild(li);
}

// 提交交互框
function submitModal() {
  // TODO: 处理提交逻辑
  closeModal();
}

效果如下：