jQuery 删除按钮 - JavaScript

在编写一个交互式网页时，删除按钮是非常常用的元素之一。在 jQuery 中，使用 .remove() 方法可以轻松地删除 HTML 元素。在此文章中，我们将会介绍如何使用 jQuery 来创建并操作删除按钮。

创建简单的删除按钮

使用 jQuery 创建删除按钮非常简单。下面的代码片段演示了如何创建一个具有 “删除” 文字的按钮，以及如何为其添加一个点击事件的处理程序以删除一个 HTML 元素。

// HTML
<div id="example">
  <p>Hello, world!</p>
  <button class="delete">Delete</button>
</div>

// JavaScript
$(document).ready(function() {
  $('.delete').click(function() {
    $(this).parent().remove();
  });
});

在此代码中，我们首先选择删除按钮（.delete）。然后，我们将 click 事件处理程序分配给它，该处理程序使用 .remove() 方法删除按钮的父元素（<div id="example">）。

动态创建删除按钮

上面的示例中删除按钮是在 HTML 中手动添加的，但在实际开发中我们可能需要动态创建此按钮。下面的代码片段演示了如何使用 $(...) 创建新的删除按钮，以及为它分配一个单击事件处理程序。

// HTML
<div id="example">
  <p>Hello, world!</p>
</div>

// JavaScript
$(document).ready(function() {
  var deleteButton = $('<button class="delete">Delete</button>');

  deleteButton.click(function() {
    $(this).parent().remove();
  });

  $('#example').append(deleteButton);
});

在此代码中，我们使用 $('<button class="delete">Delete</button>') 创建一个新的删除按钮，然后将单击事件处理程序分配给它。我们还使用 .append() 方法将按钮添加到具有 id “example”的 HTML 元素中。

更复杂的示例

下面的代码片段演示了更复杂的示例。在此示例中，我们动态创建一个列表，并为每个列表项添加删除按钮。

// HTML
<div id="example">
  <ul>
    <li>Hello</li>
    <li>World</li>
  </ul>
</div>

// JavaScript
$(document).ready(function() {
  var listItems = ['Hello', 'World'];

  var list = $('<ul>');

  $.each(listItems, function(index, value) {
    var item = $('<li>').text(value);
    var deleteButton = $('<button class="delete">Delete</button>');
    deleteButton.click(function() {
      $(this).parent().remove();
    });
    item.append(deleteButton);
    list.append(item);
  });

  $('#example').append(list);
});

在此示例中，我们使用 $.each() 循环遍历一个列表项数组。使用 $('<ul>')，我们创建一个新的 无序列表（ul）。

在循环中，我们为每个列表项创建一个新的元素（$('<li>')），并将其文本设置为对应列表项数组中的值。我们还为每个列表项创建一个删除按钮，并将单击事件处理程序与它分配。最后，我们使用 .append() 方法将列表和其所有子元素添加到 HTML 中。

结论

在本文中，我们已经介绍了 jQuery 中删除按钮的基础知识。我们演示了如何创建静态和动态删除按钮，并为其分配单击事件处理程序。在实际开发中，删除按钮可以经常用到。因此，掌握创建和操作删除按钮的技能是一个有用的技能。