Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Create a button that detetes itself.

    I need help on creating a button, via appendChild(), that when clicked will delete itself, via removeChild().

    Thanks in advance.

    ~~Robin~~

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Well, show what you have tried already. Otherwise it feels too much like doing your homework.

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts
    I don't know if it works but try in the button's onclick add this.removeChild().

    and venegal is a little right.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Code:
    onclick="this.parentNode.removeChild(this)"
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry for not posting the code sooner, first time using forums. Here it is..

    HTML:
    Code:
    <INPUT type="button" value="New Section" onclick="newSection()"/>
    
    <div id="fooBar"></div><br />
    JS:
    Code:
    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~~

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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:
    Code:
    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);
    }

  • Users who have thanked venegal for this post:

    robinaa2 (05-30-2009)

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That worked, thank you all!

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Code:
    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:
    Code:
    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)
    Last edited by Kor; 05-31-2009 at 05:59 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •