How to delete the current row in jquery

jQuery is a JavaScript library widely used in web front-end development. It is easy to use, powerful and cross-browser compatible. Using jQuery, you can easily implement complex interactive effects, dynamically update page content, and increase page interactivity. Among them, deleting the current row is a commonly used and common function in development. If you don't know how to use jQuery to achieve it, then this article will introduce you how to use jQuery to delete the current row.

1. jQuery selector

Before deleting the current row, you need to understand the jQuery selector. jQuery selector is a syntax similar to CSS selector, which can select DOM elements by tag name, class name, ID, etc.

Commonly used jQuery selectors include the following:

1. Tag selector: $("tag name"), such as: $("p") means to select all p Label.
2. Class selector: $(".class name"), such as: $(".demo") means to select all elements with class demo.
3. ID selector: $("#ID name"), such as: $("#demo") means selecting the element with the id of demo.
4. Attribute selector: $("[attribute name]"), such as: $("[href]") means to select all elements containing the href attribute.
5. Composite selector: You can mix and use the above selectors for multi-condition filtering, such as: $("ul li.active") means to select all li tags with class active.

2. Deleting the current row code implementation

With the foundation of jQuery selector, you can then delete the current row. First, you need to set up the table in HTML and set the class attribute value of the delete button to "delete-btn". The code is as follows:

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>小明</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>小红</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>小刚</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>

After setting up in HTML, you need to write jQuery code in JavaScript to implement the deletion function. The specific code is as follows:

<script>
$(function() {
  $(".delete-btn").on("click", function() {
    $(this).parents("tr").remove();
  });
});
</script>

In the above code, the $() function means to find all button elements with class "delete-btn" and add a click event listener to them; when the button is When clicked, removes its parent element tr from the DOM structure. This makes it easy to delete the current row.

3. Summary

Through the above implementation code, we can see that it is very simple to use jQuery to delete the current row. You only need to understand the jQuery selector and event listening mechanism. Overall, jQuery makes web development easier and more efficient, while also enhancing the interactivity and user experience of web pages. I hope this article can be helpful to beginners.

The above is the detailed content of How to delete the current row in jquery. For more information, please follow other related articles on the PHP Chinese website!