如何使用jQuery删除字段？解决脚本仅删input不删label的问题

Hey there! Let's fix that issue where your jQuery script only deletes the input but leaves the label behind. The solution depends on how your label is linked to the input—let's break down the two common scenarios:

Scenario 1: Label uses the for attribute (most common) #

This is when your label has a for attribute matching the input's id, like this:

<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button class="delete-input">Delete</button>

To delete both together, you can target the label by its for attribute, then remove both elements in one go. Here's a clean way to do it:

$('.delete-input').on('click', function() {
  // Grab the input element related to this delete button (adjust selector to match your DOM structure)
  const $targetInput = $(this).prev('input');
  const inputId = $targetInput.attr('id');
  
  // Find the matching label and remove both elements at once
  $(`label[for="${inputId}"]`).add($targetInput).remove();
});

The add() method lets you combine the input and label into a single jQuery collection, so you only need to call remove() once to delete both.

Scenario 2: Label wraps the input inline #

If your label directly contains the input (no for/id pairing needed), like this:

<label>
  Email: <input type="email" name="email">
  <button class="delete-input">Delete</button>
</label>

You can simply delete the parent label element, which will automatically remove the input inside it:

$('.delete-input').on('click', function() {
  // Traverse up to the parent label and delete the whole thing
  $(this).closest('label').remove();
});

Bonus: Handling dynamically added inputs #

If you're adding inputs and labels dynamically after the page loads, use event delegation to ensure the delete functionality works for new elements:

$(document).on('click', '.delete-input', function() {
  const $targetInput = $(this).siblings('input');
  const inputId = $targetInput.attr('id');
  
  $(`label[for="${inputId}"]`).add($targetInput).remove();
});

Just a quick note: For the first scenario to work, make sure your inputs have unique id values and the labels' for attributes match those IDs exactly.

内容的提问来源于stack exchange，提问作者Promgrma