如何为动态追加的多元素绑定JS代码？及设置首个输入框必填

Hey there! Let's fix your two problems step by step with clear, actionable code changes:

1. Make JS Work for All Dynamically Added Inputs #

The root issue here is that your original JS only binds event listeners to elements that exist when the page first loads. Any inputs added later (via "Add member") don't get those listeners attached.

The best fix here is event delegation—instead of binding listeners to each individual input, you bind a single listener to a parent container that exists from the start. This listener will catch events from all child inputs (even dynamically created ones) as they bubble up.

Example Code: #

<!-- HTML: Add a container to wrap all member inputs -->
<div id="members-container">
  <!-- First (required) input -->
  <div class="member-item">
    <input type="text" class="member-input" required placeholder="Enter name">
    <span class="greeting"></span>
  </div>
</div>
<button id="add-member-btn">Add member</button>

// JS: Use event delegation on the container
const container = document.getElementById('members-container');

// Listen for input events on ANY child element of the container
container.addEventListener('input', function(e) {
  // Check if the event came from a member input
  if (e.target.classList.contains('member-input')) {
    // Find the corresponding greeting element next to the input
    const greetingEl = e.target.nextElementSibling;
    // Update the greeting text
    greetingEl.textContent = e.target.value ? `Hello, ${e.target.value}!` : '';
  }
});

// Code to add new members
const addBtn = document.getElementById('add-member-btn');
addBtn.addEventListener('click', function() {
  const newItem = document.createElement('div');
  newItem.classList.add('member-item');

  // Create new input
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.classList.add('member-input');
  newInput.placeholder = 'Enter name';

  // Create greeting span
  const newGreeting = document.createElement('span');
  newGreeting.classList.add('greeting');

  // Add delete button (only for non-first inputs)
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Delete';
  deleteBtn.addEventListener('click', () => newItem.remove());

  // Assemble and add to container
  newItem.append(newInput, newGreeting, deleteBtn);
  container.appendChild(newItem);
});

This works because the event listener is attached to the static container, and it checks if the event originated from a .member-input element—no matter when that input was created.

2. Make the First Input Required & Unremovable #

To lock the first input in place and ensure it's filled out:

1. Add the required attribute to the first input (this will enforce it's not empty when submitting a form).
2. Don't add a delete button to the first input (like in the HTML above).
3. Optional: Disable any attempts to remove it (though not showing the delete button is usually enough).

Extra Safety Check (Optional): #

If you want to be extra safe, you can add a check in your delete logic to prevent removing the last remaining input (or specifically the first one):

// Modify the delete button's click handler
deleteBtn.addEventListener('click', () => {
  // Only delete if there's more than one member item
  if (container.children.length > 1) {
    newItem.remove();
  }
});

This ensures you can't delete the first (and only) input, keeping it as a mandatory field.

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