Question

我想使用jQuery动态添加和删除页面的html部分。我使用Clone()和insertAfter()来添加代码。我在单击链接（remove()）时尝试使用x=delete删除html部分，但在识别应删除的部分时遇到问题。

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

Answer 1

这应该适合你：

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

Answer 2

这里的教程用于验证和获取php，jsp，.net等中的值的技术 http://pradipchitrakar.com.np/blog/dynamically-add-remove-textfield.html

jquery动态添加/删除代码段

2 个答案: