我来帮你搞定这个需求！你的现有代码有几个小问题导致点击「Add」没反应，同时我会帮你实现点击Add添加两个文本框、点击Cancel移除所有新增文本框的功能。

先说说原代码的问题 #

• jQuery执行时机错误：如果你的<script>标签放在HTML结构前面，DOM还没加载完成，$("#addtextbox")根本找不到按钮元素，自然不会触发点击事件。
• 文本框ID拼接错误：你写的'tbTools'" + counter + "'引号嵌套混乱，会生成格式错误的ID（比如tbTools"0"），这会影响后续操作。
• 未实现Cancel按钮逻辑：原代码里没有Cancel按钮，也没有批量移除的逻辑。

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input class="btn btn-info" type="button" id="addtextbox" value="Add">
    <input class="btn btn-danger" type="button" id="canceltextbox" value="Cancel" style="display:none;">
</div>
<div id="ToolsGroup"></div>

<script>
$(document).ready(function() {
    var counter = 0;
    const MAX_TOOLS = 10; // 最大允许添加10个文本框

    $("#addtextbox").click(function() {
        // 检查总数：每次加2个，确保不超过上限
        if (counter + 2 > MAX_TOOLS) {
            alert("Only 10 learning Tools allowed per page.");
            return false;
        }

        // 循环创建两个文本框
        for(let i=0; i<2; i++){
            var textBoxIndex = counter + i;
            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + textBoxIndex);
            
            newTextBoxDiv.html(
                "<label>Tool " + (textBoxIndex + 1) + "</label>" +
                "<textarea id='tbTools" + textBoxIndex + "' name='txtTools[]' rows='3' cols='50'></textarea>" +
                "&nbsp;&nbsp;<input type='button' value='Remove' class='removeTools'>"
            );
            
            newTextBoxDiv.appendTo("#ToolsGroup");
        }
        
        counter += 2;
        // 显示Cancel按钮（只要有新增内容就显示）
        $("#canceltextbox").show();
    });

    // 单个移除按钮事件（用事件委托，避免动态元素绑定失效）
    $("#ToolsGroup").on("click", ".removeTools", function() {
        $(this).parent().remove();
        // 重新计算剩余文本框数量
        counter = $("#ToolsGroup div").length;
        // 如果没有剩余，隐藏Cancel按钮
        if(counter === 0){
            $("#canceltextbox").hide();
        }
    });

    // Cancel按钮：移除所有新增的文本框
    $("#canceltextbox").click(function() {
        $("#ToolsGroup").empty();
        counter = 0;
        $(this).hide();
    });
});
</script>

代码说明 #

1. DOM就绪事件：用$(document).ready()包裹所有jQuery代码，确保DOM加载完成后再执行，解决按钮找不到的问题。
2. 批量添加两个文本框：点击Add时通过循环创建两个文本框，同时给每个文本框生成唯一ID。
3. 事件委托处理移除按钮：因为移除按钮是动态创建的，所以用on()方法绑定事件委托，确保新创建的按钮也能触发点击。
4. Cancel按钮逻辑：点击后清空#ToolsGroup内的所有内容，重置计数器并隐藏Cancel按钮。
5. 数量限制优化：每次添加2个文本框，实时检查是否超过10个的上限。

这样就能完美实现你想要的功能啦！

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