...

View Full Version : Create a button that detetes itself.



robinaa2
05-29-2009, 03:02 PM
I need help on creating a button, via appendChild(), that when clicked will delete itself, via removeChild().

Thanks in advance.

~~Robin~~

venegal
05-29-2009, 03:16 PM
Well, show what you have tried already. Otherwise it feels too much like doing your homework.

shedokan
05-29-2009, 03:43 PM
I don't know if it works but try in the button's onclick add this.removeChild().

and venegal is a little right.

Kor
05-29-2009, 04:26 PM
onclick="this.parentNode.removeChild(this)"

robinaa2
05-30-2009, 01:46 PM
Sorry for not posting the code sooner, first time using forums. Here it is..

HTML:


<INPUT type="button" value="New Section" onclick="newSection()"/>

<div id="fooBar"></div><br />


JS:


newSectionNum = 1;

function newSection() {

var foo = document.getElementById("fooBar");
var p, input;

p = document.createElement("P");
p.setAttribute("id", "secD" + newSectionNum);
input = document.createElement("INPUT");
input.type= "button";
input.onClick = "deleteSection(newSectionNum)";
input.value = "Delete Section";
input.id = "secDelete" + newSectionNum;
p.appendChild(input);
foo.appendChild(p);

newSectionNum++;

}

function deleteSection(num) {

document.getElementById("secD" + num).removeChild("secDelete" + num);
document.getElementById("fooBar").removeChild("secD" + num);

}


~~Robin~~

venegal
05-30-2009, 02:25 PM
There are a few problems here:

1.) case sensitivity: it's input.onclick, not input.onClick

2.) onclick takes a function, not a string, so it has to be input.onclick = function(){deleteSection(newSectionNum);};.

3.) newSectionNum is a global variable, so when you click the button, it will call the delete function with the current value of newSectionNum, which will be the same for all the buttons, and always 1 larger than the most current button, so it won't do anything.
You could write the current value of newSectionNum into a scoped variable and pass it to the onclick handler, but it's much better not to keep track of all those ids and instead pass the clicked element itself to the event handler.

Your code could look something like this:

function newSection() {

var foo = document.getElementById("fooBar");
var p, input;

p = document.createElement("P");
input = document.createElement("INPUT");
input.type= "button";
input.onclick = function(){
deleteSection(this);
};
input.value = "Delete Section";
p.appendChild(input);
foo.appendChild(p);
}

function deleteSection(el) {
el.parentNode.parentNode.removeChild(el.parentNode);
}

robinaa2
05-30-2009, 04:45 PM
That worked, thank you all!

Kor
05-31-2009, 05:51 AM
input.onclick = function(){
deleteSection(this);
};
...
function deleteSection(el) {
el.parentNode.parentNode.removeChild(el.parentNode);
}

That is correct, but a little bit redundant. The moment you set the event, the self reference is passed automatically to the function. It will be enough something like:


input.onclick = deleteSection;
...
function deleteSection() {
this.parentNode.parentNode.removeChild(this.parentNode);
}

This is a cleaner approach, as it avoids an unnecessary circular referential closure (which might create a memory leak in some browsers)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum