Question

Code below contains certain tags in all four.
Image-1

here is the code :

 <div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'>
            &nbsp;&nbsp;Delegate(s) details: </div>
            <div style="border:1px solid black;"><br/>
            <div id="delegates">
            <div id="0">
            &nbsp;&nbsp; Name of the Delegate: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name='contact_person[]' type='text' size="50" maxlength="50" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Designation:
             <select name='delegate_type_name[]' class='delegate_type'>
             <option value='select'>Select</option>
             <option value='Main'>Main</option>
             </select>
            </div><br/>
            </div>
            <div>
            &nbsp;&nbsp;
<input type="button" name="more" value="Add More Delegates" id="add_more" />
            <br />
            <br />
            </div>
            </div>

In the above code on line 5 where <div id="0"> changes to value 1 in script that I mentioned in “add_more”

And the javascript for “add_more” is given below

jQuery('#add_more').click(function(){
        var id = jQuery('#delegates > div:last').attr('id');
        var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'>&nbsp;&nbsp; Name of the Delegate: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' size='50' maxlength='50' name='contact_person[]' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Designation:";
        temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' name='rem' value='Remove' id='remove' /></div><br/>";
        jQuery('#delegates').append(temp);
    });

In the javascript code above I have added a remove button in the temp+ variable

<input type='button' name='rem' value='Remove' id='remove' />

Image-2 shows the remove button every time I click on “Add more Delegates” button.

In the image-2 I click on Add More Delegates button it shows the “remove” button on the right of drop down select list.

I want a jQuery function for remove button, so that when I click on remove it should remove <div id="1"> and also reset content before removing the div tag. Below image-3 is the output that I want when I click on remove button.

code that I tried was this from some reference is this

jQuery('#remove').click(function(){
        var id = jQuery('#delegates > div:last').attr('id').remove();
    });

but no luck.

Thanks.

Answer 1

For starters your markup is a total mess. There is no way you should be using   for layout purposes. Read up on tableless layouts and css.

The first thing you need to change is the id’s of your div. An id cannot start with a numeric. I suggest naming the first div delegate0. Secondly, you are adding a remove button on every new row with the same id – all id’s on a page should be unique so i suggest you change this to class="remove".

As for your question, it really boils down to needing to add a jQuery handler to the remove buttons using the .live^docs method.

This is as simple as:

jQuery('.remove').live('click',function(){
   $(this).closest('div').remove();
});

Also, you need to keep a running counter of the id of the items added, and increment this every time a new row is added.

var nextDelegate = 1;
jQuery('#add_more').click(function(){
   ... your code here
   nextDelegate++;
});

Also, I removed the superfluous <br/> after each div.

Live example: http://jsfiddle.net/cb4xQ/