How to remove a particular div tag and reset its content using javascript
<p>Code below contains certain  tags in all four.
Image-1
<img src="http://i.stack.imgur.com/bbbmf.jpg" alt="enter image description here">
here is the code :</p>

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

<p>In the above code on line 5 where <code>&lt;div id="0"&gt;</code> changes to value 1 in script that I mentioned in "add_more"</p>

<p>And the javascript for "add_more" is given below</p>

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

<p>In the javascript code above I have added a remove button in the temp+ variable</p>

<pre><code>&lt;input type='button' name='rem' value='Remove' id='remove' /&gt;
</code></pre>

<p>Image-2 shows the remove button every time I click on "Add more Delegates" button.
<img src="http://i.stack.imgur.com/Op81K.jpg" alt="enter image description here">
In the image-2 I click on Add More Delegates button it shows the "remove" button on the right of drop down select list.</p>

<p>I want a jQuery function for remove button, so that when I click on remove it should remove <code>&lt;div id="1"&gt;</code> and also reset content before removing the div tag. Below image-3 is the output that I want when I click on remove button.
<img src="http://i.stack.imgur.com/LhmmL.jpg" alt="enter image description here"></p>

<p>code that I tried was this from some reference is this </p>

<pre><code>jQuery('#remove').click(function(){
        var id = jQuery('#delegates &gt; div:last').attr('id').remove();
    });
</code></pre>

<p>but no luck. </p>

<p>Thanks.</p>
