JQuery динамически добавлять / удалять разделы кода - PullRequest
Новая
       6

JQuery динамически добавлять / удалять разделы кода

0 голосов
/ 18 июля 2011

Я хотел бы использовать 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>

Ответы [ 2 ]

0 голосов
/ 19 декабря 2011

вот учебник, который выполняет валидацию и методы получения значений в php, jsp, .net и т. Д. http://pradipchitrakar.com.np/blog/dynamically-add-remove-textfield.html

0 голосов
/ 18 июля 2011

Это должно работать для вас: 

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