JQ 如何嵌套 动态删除与新增input框

JQ（jQuery）是一个流行的JavaScript库，用于简化HTML文档遍历、事件处理、动画和Ajax交互等操作。如果你想在页面上动态地嵌套输入框，并能通过JQ实现添加和删除，你可以按照以下步骤操作：

1. 首先，你需要创建一个基础的HTML结构，包含一个按钮用于添加新输入框和一个容器（比如`<div>`）用于放置它们：

<button id="addInput">添加输入框</button>
<div id="input-container"></div>

2. 然后，编写JavaScript/JQ代码，当点击"添加输入框"按钮时，会动态生成一个新的输入框并插入到容器中：

$(document).ready(function() {
    $('#addInput').click(function() {
        // 创建新的输入框元素
        var newInput = $('<input type="text" />');
        
        // 添加到指定容器
        $('#input-container').append(newInput);
    });
});

3. 对于删除功能，你可以在每个输入框上添加一个删除按钮，然后监听这个按钮的点击事件，移除对应的输入框。例如：

<!-- 每个输入框前加一个删除按钮 -->
<input type="text" class="removable-input">
<button class="remove-btn">删除</button>

$('.remove-btn').click(function() {
    $(this).parent().remove(); // 删除当前行及其内容
});

这样，每次点击添加按钮都会增加一个新输入框，点击删除按钮则会移除相应的输入框。