基于jQuery实现从数组过滤data-value，动态创建缺失表单行并支持删除

Got it, here's a fully working implementation that covers all your requirements, with clear breakdowns of how each part works:

HTML Structure #

<div class="form-container">
  <div class="form-row" data-value="size">
    <label>Size:</label>
    <input type="text" placeholder="Enter size">
    <button class="delete-btn">Delete</button>
  </div>
  <div class="form-row" data-value="material">
    <label>Material:</label>
    <input type="text" placeholder="Enter material">
    <button class="delete-btn">Delete</button>
  </div>
</div>
<button id="createOrderBtn">Create Order</button>

Basic CSS (for better UI) #

.form-row {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  align-items: center;
}

.delete-btn {
  background-color: #ff4444;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

#createOrderBtn {
  background-color: #00C851;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

JavaScript Logic #

// 1. Define the target data array as requested
const dataArray = ["size", "color", "material"];
const formContainer = document.querySelector('.form-container');
const createBtn = document.getElementById('createOrderBtn');

// Helper function to collect existing data-values from form rows
function getExistingValues() {
  const rows = document.querySelectorAll('.form-row');
  return Array.from(rows).map(row => row.dataset.value);
}

// 2. Handle "Create Order" button click to add missing row
createBtn.addEventListener('click', () => {
  const existingValues = getExistingValues();
  // Find the first missing value from our target array
  const missingValue = dataArray.find(val => !existingValues.includes(val));
  
  if (missingValue) {
    // Build the new form row element
    const newRow = document.createElement('div');
    newRow.classList.add('form-row');
    newRow.dataset.value = missingValue;
    
    // Populate the row with label, input and delete button
    const capitalizedLabel = missingValue.charAt(0).toUpperCase() + missingValue.slice(1);
    newRow.innerHTML = `
      <label>${capitalizedLabel}:</label>
      <input type="text" placeholder="Enter ${missingValue}">
      <button class="delete-btn">Delete</button>
    `;
    
    // Attach delete functionality to the new row's button
    newRow.querySelector('.delete-btn').addEventListener('click', () => {
      newRow.remove();
    });
    
    // Add the new row to the form container
    formContainer.appendChild(newRow);
  } else {
    alert('All required form rows are already present!');
  }
});

// 3. Initialize delete functionality for pre-existing rows
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.target.closest('.form-row').remove();
  });
});

Key Function Breakdown: #

• Data Array Setup: We start by declaring dataArray with your exact specified values.
• Missing Value Detection: The getExistingValues() function grabs all current data-value attributes from form rows, so we can spot which one is missing when the button is clicked.
• Dynamic Row Creation: When you hit "Create Order", we generate a new row only for the missing value, populate it with matching UI elements, and wire up its delete button immediately.
• Delete Functionality: Every delete button (both initial and dynamically added) removes its parent form row safely using closest('.form-row')—this works even as the DOM changes.

内容的提问来源于stack exchange，提问作者S.pal