正文

如何用JS弹出删除确认框并成功删除值

/0 浏览量
0723

当你在开发网页时，你可能需要给用户一个删除数据的确认步骤，以避免误操作。下面，我将详细讲解如何使用JavaScript来实现弹出删除确认框，并在用户确认后成功删除值。

步骤一：创建HTML元素

首先，我们需要在HTML中创建一个可以删除的值，以及一个触发删除操作的按钮。

<input type="text" id="valueInput" value="要删除的值">
<button id="deleteBtn">删除</button>

步骤二：编写JavaScript代码

接下来，我们将编写JavaScript代码来处理删除操作。

// 获取需要删除的值和按钮
const valueInput = document.getElementById('valueInput');
const deleteBtn = document.getElementById('deleteBtn');

// 为按钮添加点击事件监听器
deleteBtn.addEventListener('click', function() {
  // 弹出确认框
  if (confirm('确定要删除该值吗？')) {
    // 如果用户点击“确定”，则删除值
    valueInput.value = '';
  }
});

代码解析

  1. 首先，我们通过getElementById获取到需要删除的值和按钮。
  2. 然后，我们给按钮添加了一个点击事件监听器。当按钮被点击时，会触发一个匿名函数。
  3. 在这个匿名函数中，我们使用confirm函数弹出一个确认框，询问用户是否确定要删除该值。
  4. 如果用户点击“确定”，则执行valueInput.value = '';这行代码，将输入框的值清空，从而实现了删除操作。

示例代码整合

下面是上述步骤的整合示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除确认框示例</title>
</head>
<body>
  <input type="text" id="valueInput" value="要删除的值">
  <button id="deleteBtn">删除</button>

  <script>
    const valueInput = document.getElementById('valueInput');
    const deleteBtn = document.getElementById('deleteBtn');

    deleteBtn.addEventListener('click', function() {
      if (confirm('确定要删除该值吗？')) {
        valueInput.value = '';
      }
    });
  </script>
</body>
</html>

现在，当你点击“删除”按钮时，会弹出一个确认框，询问用户是否确定要删除该值。如果用户点击“确定”，则输入框中的值将被清空。

-- 展开阅读全文 --