Jquery 单击按钮可打开多个div窗口

我无法正确地框定标题。但问题是，我正在编写一份申请表，要求用户输入地址。我将地址1和地址2保存在两个单独的分区中，其中我的地址2被隐藏。我在单击地址2分区打开时为地址1分区提供了一个按钮。在address2中，单击“添加”时还有两个按钮，address2的克隆副本应打开，单击“删除”时，div应隐藏。问题是我可以添加和删除div。但是当我单击address2的ADD按钮时，许多窗口都会弹出。我只需要一个窗口作为用户需求弹出

到目前为止，我能写这段代码。告诉我哪里出错了。 代码如下

</div>
<div class="div1 target">Address
<div>
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1"    name="add1" required/>

</div>
<div>
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/>
</div>


<div>
Country<span class="red">*</span> 

<select name="country" id="country">
<option selected="selected" value=""> Choose Country </option>
<option id="coun1" value="coun1">Country1</option>
<option id="coun2" value="coun2">Country2</option>
<option id="coun3" value="coun3">Country3</option>
<option id="coun4" value="coun4">Country4</option>
</select>
State<span class="red">*</span> 
<select name="state"  id="state">
<option selected="selected" value=""> Choose State </option>
<option class="st1" value="st1">State1</option>
<option class="st1" value="st1">State2</option>
<option class="st1" value="st1">State3</option>
<option class="st1" value="st1">State4</option>
<option class="st2" value="st2">State5</option>
<option class="st2" value="st2">State6</option>
<option class="st2" value="st2">State7</option>
<option class="st2" value="st2">State8</option>
<option class="st3" value="st3">State9</option>
<option class="st3" value="st3">State10</option>
<option class="st3" value="st3">State11</option>
<option class="st3" value="st3">State12</option>
<option class="st4" value="st4">State13</option>
<option class="st4" value="st4">State14</option>
<option class="st4" value="st4">State15</option>
<option class="st4" value="st4">State16</option>
</select>

</div>

<div>Zip/Postal Code<span class="red">*</span>  
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/>
</div>
<input type="button" value="add" id="add0"/>
</div>



<div class="div3 target" style="display:none">Address
<div>
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1"   name="add1"         required/>

</div>
<div>
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/>
</div>


<div>
Country<span class="red">*</span> 

<select name="country" id="country">
<option selected="selected" value=""> Choose Country </option>
<option id="coun1" value="coun1">Country1</option>
<option id="coun2" value="coun2">Country2</option>
<option id="coun3" value="coun3">Country3</option>
<option id="coun4" value="coun4">Country4</option>
</select>
State<span class="red">*</span> 
<select name="state"  id="state">
<option selected="selected" value=""> Choose State </option>
<option class="st1" value="st1">State1</option>
<option class="st1" value="st1">State2</option>
<option class="st1" value="st1">State3</option>
<option class="st1" value="st1">State4</option>
<option class="st2" value="st2">State5</option>
<option class="st2" value="st2">State6</option>
<option class="st2" value="st2">State7</option>
<option class="st2" value="st2">State8</option>
<option class="st3" value="st3">State9</option>
<option class="st3" value="st3">State10</option>
<option class="st3" value="st3">State11</option>
<option class="st3" value="st3">State12</option>
<option class="st4" value="st4">State13</option>
<option class="st4" value="st4">State14</option>
<option class="st4" value="st4">State15</option>
<option class="st4" value="st4">State16</option>
</select>

</div>

<div>Zip/Postal Code<span class="red">*</span>  
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/>
</div>
<input type="button" value="add" id="add"/>
<input type="button" value="remove" id="remove"/>
</div>

$(document).ready(function(){
$("#add0").click(function(e){
    $(".div1").after($(".div3").show());
    e.preventDefault();
});
});
$(document).ready(function(){
$("#add").click(function(e){
    $(".div3").clone(true).insertBefore($(".div3"));
});
$("#remove").click(function(e){
    $(this).closest(".div3").hide();

});
e.preventDefault();
});

地址
小学*
城市*
国家*
选择国家
国家1
国家2
国家3
国家4
国家*
选择州
状态1
状态2
状态3
状态4
状态5
州6
州7
州8
州9
状态10
州11
状态12
州13
州14
州15
州16
邮政编码*
地址
小学*
城市*
国家*
选择国家
国家1
国家2
国家3
国家4
国家*
选择州
状态1
状态2
状态3
状态4
状态5
州6
州7
州8
州9
状态10
州11
状态12
州13
州14
州15
州16
邮政编码*
$（文档）.ready（函数（）{
$（“#添加0”）。单击（函数（e）{
$（.div1”）。在（$（.div3”）.show（）之后；
e、 预防默认值（）；
});
});
$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（e）{
$（.div3”）.clone（true）.insertBefore（$（.div3”）；
});
$（“#删除”）。单击（函数（e）{
$（this）.closest（“.div3”）.hide（）；
});
e、 预防默认值（）；
});

首先有两个错误：当您插入.div3两次时，已经有两个.div3。当您按add按钮时，它会同时插入这两个。您必须使用last（）来避免这种情况。 第二个错误：insertBefore（$（“.div3”））在所有.div3标记之前插入.div3。为避免此使用，必须再次使用last（），现在看起来是：$（“.div3”）.last（）.clone（true）.insertBefore（$（.div3”）.last（））； 下面的代码是正确的，您可以使用它

<!doctype html>
<html>
<head>
<title></title>
<style>

</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<div class="div1 target">Address
<div>
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1"    name="add1" required/>

</div>
<div>
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/>
</div>


<div>
Country<span class="red">*</span> 

<select name="country" id="country">
<option selected="selected" value=""> Choose Country </option>
<option id="coun1" value="coun1">Country1</option>
<option id="coun2" value="coun2">Country2</option>
<option id="coun3" value="coun3">Country3</option>
<option id="coun4" value="coun4">Country4</option>
</select>
State<span class="red">*</span> 
<select name="state"  id="state">
<option selected="selected" value=""> Choose State </option>
<option class="st1" value="st1">State1</option>
<option class="st1" value="st1">State2</option>
<option class="st1" value="st1">State3</option>
<option class="st1" value="st1">State4</option>
<option class="st2" value="st2">State5</option>
<option class="st2" value="st2">State6</option>
<option class="st2" value="st2">State7</option>
<option class="st2" value="st2">State8</option>
<option class="st3" value="st3">State9</option>
<option class="st3" value="st3">State10</option>
<option class="st3" value="st3">State11</option>
<option class="st3" value="st3">State12</option>
<option class="st4" value="st4">State13</option>
<option class="st4" value="st4">State14</option>
<option class="st4" value="st4">State15</option>
<option class="st4" value="st4">State16</option>
</select>

</div>

<div>Zip/Postal Code<span class="red">*</span>  
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/>
</div>
<input type="button" value="add" id="add0"/>
</div>



<div class="div3 target" style="display:none">Address
<div>
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1"   name="add1"         required/>

</div>
<div>
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/>
</div>


<div>
Country<span class="red">*</span> 

<select name="country" id="country">
<option selected="selected" value=""> Choose Country </option>
<option id="coun1" value="coun1">Country1</option>
<option id="coun2" value="coun2">Country2</option>
<option id="coun3" value="coun3">Country3</option>
<option id="coun4" value="coun4">Country4</option>
</select>
State<span class="red">*</span> 
<select name="state"  id="state">
<option selected="selected" value=""> Choose State </option>
<option class="st1" value="st1">State1</option>
<option class="st1" value="st1">State2</option>
<option class="st1" value="st1">State3</option>
<option class="st1" value="st1">State4</option>
<option class="st2" value="st2">State5</option>
<option class="st2" value="st2">State6</option>
<option class="st2" value="st2">State7</option>
<option class="st2" value="st2">State8</option>
<option class="st3" value="st3">State9</option>
<option class="st3" value="st3">State10</option>
<option class="st3" value="st3">State11</option>
<option class="st3" value="st3">State12</option>
<option class="st4" value="st4">State13</option>
<option class="st4" value="st4">State14</option>
<option class="st4" value="st4">State15</option>
<option class="st4" value="st4">State16</option>
</select>

</div>

<div>Zip/Postal Code<span class="red">*</span>  
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/>
</div>
<input type="button" value="add" id="add"/>
<input type="button" value="remove" id="remove"/>
</div>

<script >
$(document).ready(function(){
$("#add0").click(function(e){
    $(".div3").show();
    e.preventDefault();
});
});
$(document).ready(function(){
$("#add").click(function(e){
    $(".div3").last().clone(true).insertBefore($(".div3").last());
});
$("#remove").click(function(e){
    if($(".div3").length!=1){
        $(this).closest(".div3").remove();
    }
    else{
        $(this).closest(".div3").hide();
    }
});
e.preventDefault();
});
</script>
</body>
</html>

地址
小学*
城市*
国家*
选择国家
国家1
国家2
国家3
国家4
国家*
选择州
状态1
状态2
状态3
状态4
状态5
州6
州7
州8
州9
状态10
州11
状态12
州13
州14
州15
州16
邮政编码*
地址
小学*
城市*
国家*
选择国家
国家1
国家2
国家3
国家4
国家*
选择州
状态1
状态2
状态3
状态4
状态5
州6
州7
州8
州9
状态10
州11
状态12
州13
州14
州15
州16
邮政编码*
$（文档）.ready（函数（）{
$（“#添加0”）。单击（函数（e）{
$（“.div3”）.show（）；
e、 预防默认值（）；
});
});
$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（e）{
$（.div3”）.last（）.clone（true）.insertBefore（$（.div3”）.last（））；
});
$（“#删除”）。单击（函数（e）{
如果（$（“.div3”）.length！=1）{
$（this）.closed（“.div3”）.remove（）；
}
否则{
$（this）.closest（“.div3”）.hide（）；
}
});
e、 预防默认值（）；
});

是，上述代码有效。但是，当我删除所有添加的.div3类窗口并单击主窗口的“添加”按钮（属于.div1类）时，所有删除的窗口都会弹出。代码的功能是这样的还是我们做错了？这是因为您隐藏了div而不是删除了i'v已更改的代码，现在它是正确的，请在上面尝试，还有另一个错误我以前没有注意到。如果我添加两个address2窗口，并在第二个窗口中选择国家名称，则第一个窗口的状态正在更改，而不是第二个窗口的状态状态