在jquery中动态添加/删除div [英] Dynamically add / remove div in jquery
本文介绍了在jquery中动态添加/删除div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好
这里面临着div的问题，我想添加动态添加和删除div在div我有一些控制在asp.net
我提到我的代码
Hi All
Here am facing problem with div , i want to add dynamically add and remove div with in div i have some control in asp.net
below i mention my code
<div id="collapseOne" class="panel-collapse collapse in">
<div class="sourceEdu" id="Divsource">
<asp:HiddenField ID="HFeducationdetails" runat="server" Value="0" />
<div class="panel panel-info">
<div class="panel-heading">
<h1 class="panel-title">School <span id="spancount"></span></h1>
<span class="pull-right clickable" data-effect="slideUp" id="btnclose">
<input type="button" value="X" ></span>
</div>
<div class="box-body">
<div class="col-md-6">
<label class="control-label">Name of School</label>
<asp:TextBox ID="txtEducation3_1" runat="server" class="form-control" placeholder="Name of School"></asp:TextBox><br />
</div>
<div class="col-md-6">
<label class="control-label">Choose</label>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" style="margin-left:10px; margin-right:1px">
<asp:ListItem Selected="True">High School</asp:ListItem>
<asp:ListItem>College</asp:ListItem>
<asp:ListItem>Bus or Trade School</asp:ListItem>
<asp:ListItem>Professional School</asp:ListItem>
</asp:RadioButtonList>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label class="control-label">Location of School</label>
<asp:TextBox ID="txtlocationofschl3_1" runat="server" class="form-control" placeholder="Address" TextMode="MultiLine"></asp:TextBox><br />
</div>
<div class="col-md-2">
<label class="control-label">City</label>
<asp:TextBox ID="txtcity3_1" runat="server" class="form-control" placeholder="City"></asp:TextBox>
</div>
<div class="col-md-2">
<label class="control-label">State</label>
<asp:TextBox ID="txtstate3_1" runat="server" class="form-control" placeholder="State"></asp:TextBox>
</div>
<div class="col-md-2">
<label class="control-label">ZipCode</label>
<asp:TextBox ID="TextBox28" runat="server" class="form-control" placeholder="ZipCode"></asp:TextBox>
</div>
</div>
</div>
<div class="col-md-3">
<label class="control-label">Level / Degree Received</label>
<asp:TextBox ID="txtlevdegree3_1" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="col-md-3">
<label class="control-label">Major</label>
<asp:TextBox ID="txtmajor3_1" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="col-md-2">
<label class="control-label">Contact Person</label>
<asp:TextBox ID="txtcontactperson3_1" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="col-md-2">
<label class="control-label">From</label>
<asp:TextBox ID="txtfrom3_1" runat="server" class="form-control" placeholder="From"></asp:TextBox>
</div>
<div class="col-md-2">
<label class="control-label">TO</label>
<asp:TextBox ID="txtTo3_1" runat="server" class="form-control" placeholder="To"></asp:TextBox>
</div>
<div class=" col-md-12">
<label class="control-label">Notes / Remarks</label>
<asp:TextBox ID="txtnotes3_1" runat="server" class="form-control" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<br>
</div>
</div>
<div class="designationEdu">
</div>
<div style="float:right;"><input id="Button1" type="button" value="+ADD" class="btn btn-primary" /></div>
</div>
My JavaScript Code
My JavaScript Code
<script type="text/javascript">
$(function() {
$('#Button1').click(function() {
var hfAnswers = $("#<%= HFeducationdetails.ClientID %>");
var answers = parseInt(hfAnswers.val()) + 1;
hfAnswers.val(answers);
$('.sourceEdu:first').clone().attr({ name: "ans_clone_" + answers, id: "ans_clone_" + answers }).appendTo('.designationEdu');
})
})
function removeRow(input) {
var hfAnswers = $("#<%= HFeducationdetails.ClientID %>");
var answers = parseInt(hfAnswers.val()) + 1;
hfAnswers.val(answers);
$('#Divsource').attr({ name: "ans_clone_" + answers, id: "ans_clone_" + answers }).remove();
//$('#Divsource').remove().attr({ name: "ans_clone_" + answers, id: "ans_clone_" + answers });
//$('#Divsource').remove();
}
</script>
if i click three time of add button , it added three times but i can’t remove ...
please guide me
What I have tried:
above mention code i tried ... if u have any doubt pls ask me ...
if i click three time of add button , it added three times but i can't remove ...
please guide me
What I have tried:
above mention code i tried ... if u have any doubt pls ask me ...
推荐答案
(function() {
('#Button1').click(function() {
var hfAnswers =
('#Button1').click(function() { var hfAnswers =
(\"#<%= HFeducationdetails.ClientID %>\");
var answers = parseInt （hfAnswers.val（））+ 1 ;
hfAnswers.val(answers);
("#<%= HFeducationdetails.ClientID %>"); var answers = parseInt(hfAnswers.val()) + 1; hfAnswers.val(answers);
这篇关于在jquery中动态添加/删除div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
