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。

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

例如，如果用户删除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 plz动态添加/删除HTML元素，如下所示 Add /Remove dynamically HTML element with jQuery

Answer 3

您可以将三个变量用作存在的div的标志。单击add div按钮时，检查未设置的第一个标志，添加该div并设置该特定div的标志。如果设置了所有三个标志，则禁用add more divs按钮。希望这可以帮助。

Answer 4

它的工作正常（Plz优化了这段代码）:)

<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();
});

});

添加＆amp;动态删除HTML DIV

4 个答案: