adding and deleting (specific) form elements using javascript

Question

i have a textarea and beside it are two buttons: "add another textarea" and "delete this textarea"

here is my html code:

<div id="summaryIn">
                            <label for="">Summary of Experience:</label> 
                            <textarea class="TA1" name="mySummary[]" value=""></textarea>
                            <button class="adddel" name="cmdDelSummary[]" id="cmdDelSummary" title="Delete this Summary" onClick="DelSummary('summaryIn');">-</button> 
                            <button class="adddel" id="cmdAddSummary" title="Add Another Summary" onClick="AddSummary('summaryIn');">+</button>
                        </div>

my javascript function for adding the textarea works fine, however the delete button doesn't work well, here is the javascript code:

function DelSummary(divName){
alert(summary_counter);
if (summary_counter == 1)
{
    document.getElementById('cmdDelSummary').disabled=true;
}
else
{
    summaryIn.removeChild(summaryIn.lastChild);
    summary_counter--;
    //alert(summary_counter);
}

}

i've been trying to figure this out for quite a long time now, but until now i haven't found any solution. . .i don't know how to index/reference the additional delete buttons so that the removeChild would delete that particular textarea only and not always the lastChild..thanks very much in advance :)

Is it alerting the right summary_counter? Also can you add the code for AddSummary — Adithya Surampudi
– Adithya Surampudi, Commented Jun 20, 2011 at 0:24

Adithya Surampudi · Accepted Answer · 2011-06-20 00:27:18Z

1

I think you have to add

summaryIn = document.getElementById(divName);

before

summaryIn.removeChild(summaryIn.lastChild);

answered Jun 20, 2011 at 0:27

Adithya Surampudi

4,4441 gold badge20 silver badges17 bronze badges

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

Comments

RobG · Accepted Answer · 2011-06-20 02:22:56Z

0

This line:

summaryIn.removeChild(summaryIn.lastChild);

seems to be dependant on the practice of making element names and ids into global variables that reference the element. That is a non-standard practice that has not been implemented by all browsers.

Instead use the standards-compliant:

var  summaryIn = document.getElementById('summaryIn');

Now you can call its removeChild method. You should probaby do some checking of what you are about to remove too, since initially the "Add Another Summary" button is the last element child.

Edit

By convention, function names starting with a capital letter are reserved for cosntructors, so I've used lower case.

To remove the div and its content from the document:

// Go up DOM until reach parent element with tagName
// If no such node found, return undefined.
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el.parentNode) {
    el = el.parentNode;

    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
}

function delSummary(el){
  var div = upTo(el, 'div');
  div.parentNode.removeChild(div);
}

And call it like this:

  <button ... onclick="delSummary(this);" ...>-</button>

While HTML attribute names are not case sensitive, I find that using camel case makes them hard to read and so use lower case.

edited Jun 20, 2011 at 2:22

answered Jun 20, 2011 at 0:35

RobG

148k32 gold badges180 silver badges216 bronze badges

2 Comments

Ken Muyot Over a year ago

thanks for the answer...however i have another question... whenever i click the "Add another Summary" it adds another <div> with the same content (with the two buttons) below the previous div.. how do i make (for example i already have 5 divs of the same content) a particular "Delete this Summary" button (let's say the second) remove that entire second div?

RobG Over a year ago

Presumably you are cloning the div and it's content. When the button is clicked, it can pass a reference to itself to the listener using this or you can use the associated event object. Then go up the parentNode chain to the div, then delete the entire div using div.parentNode.removeChild(div). I'll update my answer shortly.

Collectives™ on Stack Overflow

adding and deleting (specific) form elements using javascript

2 Answers 2

Comments

Edit

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Edit

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related