使用jQuery实现多元素添加与移除的技术问题咨询

看起来你在做两个实用的前端功能：实时同步输入内容，还有动态添加输入框。我帮你把这段代码理清楚，还补全了没写完的动态添加逻辑，顺便给你解释下关键细节：

1. 实时同步输入内容到指定元素 #

这段原生JS代码能让输入框的内容实时显示在目标<span>里：

// 获取ID为'1'的输入框（建议把ID改成非纯数字，比如input-name，更符合规范）
var name1 = document.getElementById('1'); 
name1.addEventListener('input', function() { 
    // 选中第一个带有one类的span元素
    var result = document.querySelector('span.one'); 
    // 把输入框的内容同步到span中
    result.innerHTML = this.value; 
});

小提示：HTML元素ID尽量别用纯数字，虽然浏览器能识别，但不符合W3C规范，改成有意义的命名会更易维护。

2. 动态添加/删除输入框（补全版） #

你的jQuery代码只写了开头，我帮你补全了完整的添加和删除逻辑，这是前端表单里很常见的需求：

$(document).ready(function() { 
    var max_fields = 20; // 允许添加的最大输入框数量
    var wrapper = $(".input_fields_wrap"); // 用来装输入框的容器
    var add_button = $(".add_field_button"); // 触发添加的按钮
    var x = 1; // 初始的输入框数量

    $(add_button).click(function(e) { 
        e.preventDefault(); // 阻止按钮默认的跳转/提交行为
        // 先检查有没有超过最大限制
        if(x < max_fields){ 
            x++; 
            // 往容器里加新的输入框，顺便带上删除按钮
            $(wrapper).append(`<div><input type="text" name="field[]"/><a href="#" class="remove_field">删除</a></div>`); 
        } else {
            alert('最多只能添加20个输入框哦');
        }
    });

    // 用事件委托处理删除按钮——因为删除按钮是动态生成的，直接绑定事件会无效
    $(wrapper).on("click",".remove_field", function(e){ 
        e.preventDefault(); 
        $(this).parent('div').remove(); // 删掉当前输入框所在的容器
        x--; // 数量计数减回去
    });
});

几个关键要点：

• 一定要确保页面里引入了jQuery库，不然这段代码完全跑不起来
• 页面里必须存在对应的容器（.input_fields_wrap）和添加按钮（.add_field_button），代码才能找到它们
• 输入框的name设成field[]，后端接收表单数据的时候可以直接拿到一个数组，处理起来更方便

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