jquery dynamically add/delete sections of code
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="thisIsJus开发者_JAVA百科tAPlaceHolder"></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>
This should work for you:
$('.deleteBox').live('click',function() {
$(this).parent().parent().remove();
});
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
加载中,请稍侯......
精彩评论