jQueryを使用して、ページのHTMLセクションを動的に追加および削除したいと考えています。私はClone()
とinsertAfter()
を使ってコードを追加します。リンクをクリックすると(x=delete
)htmlのセクションを削除するのにremove()
を使用しようとしていますが、削除する必要のあるセクションを特定できません。jquery動的にコードのセクションを追加/削除する
<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>
ご質問は非常に明確ではありません、PHPの値を取得するために、検証と技術を行いチュートリアルです。 –