React实现动态添加/删除Div行的方法求助

没问题，我来帮你搞定这个动态添加删除Intent Div的功能！下面分原生JS和React两种常见场景给你解决方案：

先理清楚核心需求 #

我们要实现的是：点击按钮新增和你现有结构一致的Div区块，每个区块都能单独删除，同时保证至少保留一个区块避免空状态。

场景一：原生HTML+JavaScript方案 #

第一步：调整基础HTML结构 #

我们给页面补充新增按钮，同时给每个Intent区块加上删除按钮（包括初始的那个）：

<!-- 容器用来存放所有Intent区块 -->
<div id="intentContainer">
  <div class="intent" id="intent1" style="border:1px solid #eee">
    <div class="form-group row">
      <label for="intent1" class="col-sm-1 col-form-label">Intent</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" name="indent[]" id="intent1" placeholder="Enter intent"/>
      </div>
      <!-- 添加删除按钮 -->
      <div class="col-sm-2">
        <button type="button" class="btn btn-danger delete-btn">删除</button>
      </div>
    </div>
  </div>
</div>

<!-- 新增按钮 -->
<button type="button" id="addIntentBtn" class="btn btn-primary mt-3">新增Intent</button>

第二步：编写JavaScript逻辑 #

用原生JS实现核心功能，注意给新增的区块绑定删除事件，同时保证ID唯一：

const intentContainer = document.getElementById('intentContainer');
const addIntentBtn = document.getElementById('addIntentBtn');
let intentCount = 2; // 初始已有intent1，从2开始计数

// 新增Intent区块
addIntentBtn.addEventListener('click', () => {
  // 复制第一个区块作为模板
  const template = document.querySelector('.intent').cloneNode(true);
  
  // 修改模板的唯一ID和内部元素属性
  template.id = `intent${intentCount}`;
  const input = template.querySelector('input');
  input.id = `intent${intentCount}`;
  input.value = ''; // 清空输入值
  const label = template.querySelector('label');
  label.setAttribute('for', `intent${intentCount}`);
  
  // 给新增的删除按钮绑定事件
  const deleteBtn = template.querySelector('.delete-btn');
  deleteBtn.addEventListener('click', () => {
    if (intentContainer.children.length > 1) {
      template.remove();
    } else {
      alert('至少需要保留一个Intent哦！');
    }
  });
  
  // 将新区块插入容器末尾
  intentContainer.appendChild(template);
  intentCount++;
});

// 给初始的删除按钮绑定事件
document.querySelector('.delete-btn').addEventListener('click', function() {
  if (intentContainer.children.length > 1) {
    this.closest('.intent').remove();
  } else {
    alert('至少需要保留一个Intent哦！');
  }
});

场景二：React组件方案 #

如果你的代码是React项目的一部分，用状态管理会更简洁：

import { useState } from 'react';

function IntentManager() {
  // 用state维护Intent列表，初始包含一个空项
  const [intents, setIntents] = useState([{ id: 1, value: '' }]);

  // 新增Intent
  const addIntent = () => {
    const newId = intents.length + 1;
    setIntents([...intents, { id: newId, value: '' }]);
  };

  // 删除Intent
  const deleteIntent = (targetId) => {
    if (intents.length > 1) {
      setIntents(intents.filter(item => item.id !== targetId));
    } else {
      alert('至少需要保留一个Intent哦！');
    }
  };

  // 输入内容变化时更新状态
  const handleInputChange = (targetId, newValue) => {
    setIntents(intents.map(item => 
      item.id === targetId ? { ...item, value: newValue } : item
    ));
  };

  return (
    <div>
      <div id="intentContainer">
        {intents.map(item => (
          <div key={item.id} className="intent" style={{border:'1px solid #eee'}}>
            <div className="form-group row">
              <label htmlFor={`intent${item.id}`} className="col-sm-1 col-form-label">Intent</label>
              <div className="col-sm-5">
                <input 
                  type="text" 
                  className="form-control" 
                  name="indent[]" 
                  id={`intent${item.id}`} 
                  placeholder="Enter intent"
                  value={item.value}
                  onChange={(e) => handleInputChange(item.id, e.target.value)}
                />
              </div>
              <div className="col-sm-2">
                <button 
                  type="button" 
                  className="btn btn-danger"
                  onClick={() => deleteIntent(item.id)}
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
      <button type="button" className="btn btn-primary mt-3" onClick={addIntent}>
        新增Intent
      </button>
    </div>
  );
}

export default IntentManager;

关键注意点 #

• 所有元素的ID必须唯一，避免DOM冲突
• 原生JS方案要给新增元素单独绑定事件，或者用事件委托优化
• 从类名看你应该用了Bootstrap，上面的按钮样式可以直接生效

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