点击按钮创建独立表单及删除对应表单的技术问题

我来帮你搞定这个问题！你的代码现在出现重复表单的核心原因是：每次点击「添加图表」时，你都在往所有已存在的.div-graph元素里追加内容，而不是创建一个全新的独立表单容器。下面是修复后的完整代码，我会逐一解释关键改动：

修复后的JavaScript代码 #

// 添加图表
$('body').on('click', '.ajout-graph', function() {
    var col_tab = document.getElementById('grille').rows[0].cells;
    var nb_cols = document.getElementById('grille').rows[0].cells.length;
    var titre_col='';
    
    // 1. 创建一个全新的图表表单容器，而不是复用旧的
    const newGraphForm = $('<div class="div-graph"></div>');
    
    // 2. 所有表单元素都追加到这个新容器里
    newGraphForm.append('<br/><label>图表标题 : </label>');
    newGraphForm.append('<input type="text" name="titre-graph" class="graph" />');
    newGraphForm.append('<label>图表类型选择 : </label>');
    newGraphForm.append('<br/>');
    newGraphForm.append('<label>X轴 : </label>');
    const xSelect = $('<select name="axe_x" class="graph axe-x"></select>');
    for (var num_col=1; num_col<nb_cols; num_col++) {
        titre_col=col_tab[num_col].children[3].value;
        xSelect.append('<option value = "' + num_col.toString() + '">' + titre_col.trim() + '</option>');
    }
    newGraphForm.append(xSelect);
    
    newGraphForm.append('<label>Y轴 : </label>');
    const ySelect = $('<select name="axe_y" class="graph axe-y"></select>');
    for (var num_col=1; num_col<nb_cols; num_col++) {
        titre_col=col_tab[num_col].children[3].value;
        ySelect.append('<option value = "' + num_col.toString() + '">' + titre_col.trim() + '</option>');
    }
    newGraphForm.append(ySelect);
    
    newGraphForm.append('<br/>');
    newGraphForm.append('<label>X轴刻度 : </label>');
    newGraphForm.append('<input type="number" name="grad-x-graph" class="graph grad" />');
    newGraphForm.append('<label>Y轴刻度 : </label>');
    newGraphForm.append('<input type="number" name="grad-y-graph" class="graph grad" />');
    newGraphForm.append('<br/><div align="center">');
    newGraphForm.append('<button type="button" name="previsualisation-graph" class="btn btn-default btn-lg previ_graph">预览</button>\n' + ' <button type="button" name="supprimer-graph" class="btn btn-info btn-lg spr_graph">删除</button>\n');
    newGraphForm.append('</div><br/>');
    
    // 3. 最后把这个全新的表单容器加到目标区域
    $(this).parent().find('.add').append(newGraphForm);
});

// 删除图表
$('body').on('click', '.spr_graph', function() {
    // 直接找到当前按钮所在的最外层.div-graph容器并删除，精准且简单
    $(this).closest('.div-graph').remove();
});

关键改动说明 #

1. 新增独立表单容器 #

原来的代码每次都用$(this).parent().find('.div-graph')找到所有已存在的图表容器，然后往每个里面塞内容，导致所有旧表单都被重复修改。现在我们先创建一个全新的.div-graph元素，所有表单内容只追加到这个新元素里，最后再把它加到页面中，彻底避免重复。

2. 优化下拉框创建逻辑 #

我把X轴/Y轴的下拉框也改成先单独创建，再追加到新容器里，这样代码更清晰，也避免了多次查找DOM元素的性能损耗。

3. 简化删除逻辑 #

原来的删除代码用index()计算位置再删除，很容易因为DOM结构变化出错。现在用closest('.div-graph')直接找到当前删除按钮所属的表单容器，一步到位删除，逻辑更简单可靠。

4. 移除重复的ID属性 #

注意到你原来的代码里给输入框加了重复的id（比如titre-graph），ID在页面中必须唯一，所以我把这些ID去掉了，只保留类名就足够了——因为你是通过事件委托来处理交互，不需要依赖ID。

原HTML结构无需修改 #

你的HTML部分是没问题的，不需要做任何改动：

<div class="panel panel-default">
    <div class="panel-heading">图表生成</div>
    <div class="panel-body">
        <div class="form-group">
            <button class="ajout-graph" type="button"><div align="center"><i class="fas fa-plus-circle"> 添加图表</i></div></button>
            <div class="panel-body add">
            </div>
        </div>
    </div>
</div>

现在点击「添加图表」会每次生成一个独立的表单，点击「删除」只会移除当前按钮所在的那个表单，完全符合你的需求！

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