2011-07-18 20 views
0

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> 
+0

ご質問は非常に明確ではありません、PHPの値を取得するために、検証と技術を行いチュートリアルです。 –

答えて

0

これはあなたのために働く必要があります。

ここ
$('.deleteBox').live('click',function() { 
    $(this).parent().parent().remove(); 
}); 
+0

それは本当にあります! – bob

関連する問題