添加&动态删除 HTML DIV

Question

我在动态添加和删除 html div 时遇到问题。下面是我正在处理的简化代码：

<input type="button" value="+ Add More Division" name="add_div" id="add_div">

<div id="div_1">
    <input type="button" value="+ Delete Div A" name="del_a" id="del_a">
</div>

<div id="div_2">
    <input type="button" value="+ Delete Div B" name="del_b" id="del_b">
</div>

<div id="div_3">
    <input type="button" value="+ Delete Div C" name="del_c" id="del_c">
</div>

这是情况，div_1、div_2 和 div_3 可以动态添加和删除。 div_1 将始终与按钮 ID del_a 关联，div_2 与 del_b 关联，div_3 与 del_c 关联。最多只能添加 3 个 div。

我需要可以添加和删除 div 并重用 div_1、div_2 和 div_3 以及关联的按钮 id 的 jquery。

例如，如果用户删除了div_2，并且用户想要添加更多分区（只能再添加1个），jquery将尝试查找现有的div，并以某种方式记住它。由于 div_2 不存在，因此将添加 div_2，与顺序无关。 div_3 可以先放在其他 div 之前或之后。

我只是想给用户编辑表单的自由，因为这个庞大的表单。我不知道如何使用 .each() 在 jQuery 中执行此操作。

感谢您的帮助。

编辑： 默认情况下，表单上仅存在 div_1。用户可以自由添加另外 2 个 div 以添加更多 div。当 div_2 或 div_3 存在时，用户还可以删除 div_1。必须存在一个 div。

Answer 1

你可以使用 detach() 函数...它会简单地删除该 div，如果你想再次添加它，请提供该 div 的引用并再次添加它..像这样

假设，用户像这样删除了第一个 div......

var div

$('#del_a').click(function(){
div= $('#div_1').detach();
});

当

用户单击添加按钮时，您可以执行类似的操作...

$('#add_div').click(function(){
$(div).appendTo('where you want to append')
});

我认为这可能对您有帮助..

Answer 2

If you want to delete div dynamically den use it:
$('#mydiv').empty();

使用 jQuery 添加/删除动态 HTML 元素，请参见下文
使用 jQuery 动态添加/删除 HTML 元素

Answer 3

您可以使用三个变量作为当前 div 的标志。单击添加 div 按钮时，检查第一个未设置的标志，添加该 div 并为该特定 div 设置标志。如果设置了所有三个标志，则禁用添加更多 div 按钮。希望这有帮助。

Answer 4

它工作正常（请优化此代码）:)

<script type="text/javascript" >
$(document).ready(function(){
$('#add_div').click(function(){
    if(($('#del_a').is(":hidden"))){$("#del_a").show(); return; }
    if(($('#del_b').is(":hidden"))){$("#del_b").show(); return; }
    if(($('#del_c').is(":hidden"))){$("#del_c").show(); return; }
});
$('#del_a').click(function(){
    if($('#del_b').is(":hidden") && $('#del_c').is(":hidden") )
        return;
    $('#del_a').hide();
});
$('#del_b').click(function(){
    if($('#del_a').is(":hidden") && $('#del_c').is(":hidden") )
        return;
    $('#del_b').hide();
});
$('#del_c').click(function(){
    if($('#del_a').is(":hidden") && $('#del_b').is(":hidden") )
            return;
    $('#del_c').hide();
});

});