jQuery根据索引删除动态添加的.form-group元素异常问题咨询

Hey there, let's figure out why your delete logic is misbehaving and fix it up!

First off, yes—this issue is definitely tied to your dynamically added elements, but the root cause is how you're handling event binding and index calculation, not just the dynamic addition itself. Let's break down what's going wrong and how to fix it:

Why you're seeing weird deletion behavior #

1. Static event binding fails for dynamic elements: If you initially bound click events directly to delete buttons (like $('.delete-btn').click(...)), any new .form-group you add later won't have that event attached. Clicking their delete buttons might trigger old event handlers that use outdated index values.
2. Outdated index values: If you're using a pre-stored index variable instead of fetching the real-time index of the element you want to delete, the index gets out of sync after you remove an item. For example, if you delete index 1, the original index 2 item becomes index 1—but your code might still be using the old numbering.

The fix step-by-step #

Let's adjust your code to handle dynamic elements properly and ensure only the target element gets deleted:

1. Update your HTML structure to include delete buttons

First, make sure every .form-group (both initial and dynamically added) has a delete button:

<div class="mycontainer">
  <div class="form-group">
    <input type="text" class="form-control">
    <button class="delete-btn">Delete</button>
  </div>
  <!-- Repeat for your initial form groups -->
</div>
<button id="add-form-group">Add New Field</button>

2. Use event delegation for delete buttons

Instead of binding events directly to .delete-btn, delegate the event to the static .mycontainer (since it exists when the page loads). This way, even dynamically added buttons will trigger the handler:

// Handle adding new form groups
$('#add-form-group').click(function() {
  const newGroup = `
    <div class="form-group">
      <input type="text" class="form-control">
      <button class="delete-btn">Delete</button>
    </div>
  `;
  $('.mycontainer').append(newGroup);
});

// Handle deletion with event delegation
$('.mycontainer').on('click', '.delete-btn', function() {
  // Get the REAL-TIME index of the parent .form-group
  const targetIndex = $(this).closest('.form-group').index('.form-group');
  
  // Delete ONLY the element at this real-time index
  $('.mycontainer').find('.form-group').eq(targetIndex).remove();
  
  // Optional: If you display index numbers anywhere, update them here
  $('.mycontainer .form-group').each(function(i) {
    // Example: If you have a label showing the index
    // $(this).find('.index-number').text(i + 1);
  });
});

Key notes to remember #

• Event delegation is non-negotiable for dynamic elements: By attaching the event to a static parent, you ensure all current and future child elements trigger the handler.
• Always fetch real-time index: Using .closest('.form-group').index('.form-group') gets the current position of the element in the DOM right when you click delete, so it's never outdated.
• Your original eq(index).remove() was correct—when paired with a valid, up-to-date index: The problem wasn't that line itself, but how you were getting/using the index value.

That should fix the issue where multiple elements get deleted, and keep your indexes in sync every time you remove an item.

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