动态添加和删除HTML DIV

我有一个动态添加和删除html div的问题。下面是我的工作简化代码：动态添加和删除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之前或之后先行。

我只是想给用户自由编辑窗体，因为这个庞大的窗体。我不知道如何在jQuery中使用.each（）来做到这一点。

感谢您的帮助。

编辑： 默认情况下，窗体上只存在div_1。用户可以自由添加另外2个div来添加更多的div。当div_2或div_3存在时，用户也可以删除div_1。一格必须存在。

来源

2011-02-10 Arief

@ BOX9我的意思是自由填写的信息，并添加或删除DIV。对不起，我可能不会在这里问清楚。默认情况下，只有div_1存在。用户可以添加另外2个div来添加更多信息。 – Arief

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

添加/删除动态HTML元素使用jQuery PLZ见下文 Add /Remove dynamically HTML element with jQuery

来源

2011-02-10 05:15:01

问题是如何添加另一个divs并使用div_1，div_2和div_3，具体取决于现有的div。 – Arief

你可以为这个http：//api.jquery使用add（）函数。com/add/ –

我知道如何添加，我只是不知道如何编写jQuery来检测现有的div，然后添加另一个div，其中最多只能添加3个div。一个div必须存在，哪个div无关紧要，可以是div_1，div_2或div_3。 – Arief

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

来源

2011-02-10 05:16:51 Harish

可以使用detach()功能....它会直接删除div和如果你想再次添加它有，该分区的参考，并将其添加again..something这样

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

var div 

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

...

当上添加按钮的用户点击，你可以做这样的事情......

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

我想这可能会帮助你..

来源

2011-02-10 05:23:21 Vivek

其工作的罚款（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(); 
}); 

});

来源

2011-02-10 12:12:55

我会试试这个。 – Arief

@Arief ::我也在等待你的回复...... :) –

动态添加和删除HTML DIV

回答

相关问题