How to remove a particular div tag and reset its content using javascript

Question

Code below contains certain tags in all four. Image-1 enter image description here 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. 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.

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. enter image description here

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.

your question makes no sense - it's almost impossible to parse — Alnitak
– Alnitak, Commented Sep 27, 2011 at 8:19
I know, images would have being better to understand. @Alnitak - Thanks — leroy
– leroy, Commented Sep 27, 2011 at 8:49

adeneo · Accepted Answer · 2011-09-27 08:21:04Z

2

You can't give an element id that is only a number, it must be #mydiv1, #mydiv2 or something similar, i.e. beginning with a letter not a number.

answered Sep 27, 2011 at 8:21

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alnitak Over a year ago

actually, in HTML5 you can use numbers as element IDs.

Jamiec · Accepted Answer · 2011-09-28 07:34:51Z

0

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/

edited Sep 28, 2011 at 7:34

answered Sep 27, 2011 at 8:38

Jamiec

136k15 gold badges143 silver badges202 bronze badges

6 Comments

leroy Over a year ago

I wish i added images to make you'll understand. I know this way its quite difficult to understand.

Jamiec Over a year ago

@leroy - ive upvoted your quesion so you should be able to add images now.

leroy Over a year ago

remove button is not added with same id as I mentioned in my question 'id' value is changed or incremented my "1" every new row that it creates.

leroy Over a year ago

@ jamiec I used the live example code but still remove button click event not workning. Nothing happens even if I click on remove button.

leroy Over a year ago

it is exactly what I wanted but somehow remove button is not working. How come its working fine in live example ..?? I used the same code also changed the div id's that you asked for.

|

Collectives™ on Stack Overflow

How to remove a particular div tag and reset its content using javascript

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related