Home/ Questions/Q 6141531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:15:48+00:00

I would like to use jQuery to dynamically add and remove sections of html

  • 0

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="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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should work for you:

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