jquery动态添加/删除代码段
我想使用 jQuery 向页面动态添加和删除 html 部分。我使用 Clone() 和 insertAfter() 添加代码。我尝试使用 remove() 在单击链接时删除 html 部分 (x=delete)，但无法识别应删除的部分。
<script src="jquery/jquery.js"></script>
<body>
<div id="thisIsJustAPlaceHolder"></div>
<div id="thisIstheTemplate" class='blueBox'>
A text box:
<input id="preName1" type="text" name="txt_first"/>
<span class='deleteBox'><a href="#" class='deleteBox'>X</a></span><br/>
Radio Box
<input id="preRadio1" type="radio" name="rb_option1" value="option1" /> Option 1
<input id="preRadio1" type="radio" name="rb_option1" value="option2" /> Option 2
<br/>
<input type="hidden" id="prehidden1" value="dummy" name="txt_last" /><br/>
</div>
<div class="thisIsJustAPlaceHolder"></div>
<br/>
<input id="Submit" type="submit" value="I need another box please" />
<script>
$(document).ready(function() {
// append a new box
$('#Submit').click(function() {
$('#thisIstheTemplate').clone()
.removeAttr("id")
.addClass("myClass")
.insertAfter($('#thisIsJustAPlaceHolder'));
return false;
});
// delete box when X is clicked
$('.deleteBox').click(function() {
// alert($(this).parent().get("class"));
// some code here...
return false;
});
});
</script>
<style>
.blueBox{
border: 1px solid blue;
width: 400px;
padding: 20px;
margin: 10px;
}
a.deleteBox{
float:right;
}
</style>
I would like to use jQuery to dynamically add and remove sections of html to a page. I use Clone() and insertAfter() to add code. I am try to use remove() to remove section of html when a link is clicked (x=delete) but am having trouble identifying the section that should be deleted.
<script src="jquery/jquery.js"></script>
<body>
<div id="thisIsJustAPlaceHolder"></div>
<div id="thisIstheTemplate" class='blueBox'>
A text box:
<input id="preName1" type="text" name="txt_first"/>
<span class='deleteBox'><a href="#" class='deleteBox'>X</a></span><br/>
Radio Box
<input id="preRadio1" type="radio" name="rb_option1" value="option1" /> Option 1
<input id="preRadio1" type="radio" name="rb_option1" value="option2" /> Option 2
<br/>
<input type="hidden" id="prehidden1" value="dummy" name="txt_last" /><br/>
</div>
<div class="thisIsJustAPlaceHolder"></div>
<br/>
<input id="Submit" type="submit" value="I need another box please" />
<script>
$(document).ready(function() {
// append a new box
$('#Submit').click(function() {
$('#thisIstheTemplate').clone()
.removeAttr("id")
.addClass("myClass")
.insertAfter($('#thisIsJustAPlaceHolder'));
return false;
});
// delete box when X is clicked
$('.deleteBox').click(function() {
// alert($(this).parent().get("class"));
// some code here...
return false;
});
});
</script>
<style>
.blueBox{
border: 1px solid blue;
width: 400px;
padding: 20px;
margin: 10px;
}
a.deleteBox{
float:right;
}
</style>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这应该适合你：
This should work for you:
这是教程，它进行验证和获取 php、jsp、.net 等中的值的技术
http://pradipchitrakar.com.np/blog/dynamically-add-remove -textfield.html
here's tutorial which does validation and techniques to get values in php, jsp, .net etc
http://pradipchitrakar.com.np/blog/dynamically-add-remove-textfield.html