表单提交代码生成问题：DOM取值及SKU区块克隆异常

Hey there! Let's work through the two main problems you're hitting with your SKU batch form, step by step:

1. Stop Manually Adding Cloned Elements for DOM Retrieval #

The core issue here is relying on document.getElementById()—IDs are supposed to be unique in the DOM, so when you clone elements with the same ID, this method will only ever return the first matching element. Instead, use class selectors to target all your SKU batch blocks, then loop through them to collect data automatically.

Example: Collect All SKU Data on Form Submit #

document.querySelector('#submit-btn').addEventListener('click', function(e) {
  e.preventDefault();
  
  // Grab every SKU block using a shared class
  const skuBlocks = document.querySelectorAll('.sku-batch-block');
  
  // Convert the NodeList to an array and extract data from each block
  const skuData = Array.from(skuBlocks).map(block => {
    return {
      sku: block.querySelector('.sku-input').value,
      batchQty: block.querySelector('.batch-quantity-input').value,
      // Add any other fields from your SKU block here
    };
  });
  
  // Use skuData to run your code generation logic
  console.log('Collected SKU batches:', skuData);
});

2. Fix the "Only Works After Adding Second SKU" Issue #

This almost always happens because your clone/remove button event listeners are only bound to the initial elements, not the ones you add dynamically. Use event delegation to handle clicks on any clone/remove button—even those added later.

Example: Improved Clone & Remove Logic #

First, structure your initial SKU block with classes (skip IDs for repeated elements):

<div id="sku-container">
  <div class="sku-batch-block">
    <input type="text" class="sku-input" placeholder="Enter SKU">
    <input type="number" class="batch-quantity-input" placeholder="Batch Quantity">
    <button class="remove-sku-btn">Remove</button>
  </div>
</div>
<button id="add-sku-btn">Add Another SKU Batch</button>
<button id="submit-btn">Submit & Generate Code</button>

Then set up event listeners with delegation:

const skuContainer = document.getElementById('sku-container');
const addSkuBtn = document.getElementById('add-sku-btn');

// Handle adding new SKU blocks
addSkuBtn.addEventListener('click', function() {
  // Clone the last existing SKU block
  const lastBlock = skuContainer.querySelector('.sku-batch-block:last-child');
  const newBlock = lastBlock.cloneNode(true);
  
  // Clear input values in the cloned block so it's empty for the user
  newBlock.querySelectorAll('input').forEach(input => input.value = '');
  
  skuContainer.appendChild(newBlock);
});

// Handle removing SKU blocks (using event delegation)
skuContainer.addEventListener('click', function(e) {
  if (e.target.classList.contains('remove-sku-btn')) {
    // Don't let the user remove the last remaining block
    if (skuContainer.querySelectorAll('.sku-batch-block').length > 1) {
      e.target.closest('.sku-batch-block').remove();
    }
  }
});

Key Fixes Here: #

• We use a container (#sku-container) to wrap all SKU blocks, which makes event delegation straightforward.
• The clone button works with the initial block right away—no need to add a second one first.
• Remove button clicks are handled at the container level, so dynamically added buttons will trigger the event without extra setup.

Quick Recap #

• Ditch IDs for repeated elements—use classes instead to avoid DOM conflicts.
• Event delegation eliminates the need to rebind listeners every time you add a new block.
• When collecting data, loop through all blocks with querySelectorAll() to grab values from every batch automatically.

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