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 4 of 4
  1. #1
    Regular Coder sea4me's Avatar
    Join Date
    Jan 2009
    Location
    Damn, I don't know...
    Posts
    390
    Thanks
    11
    Thanked 28 Times in 27 Posts

    Question Javascript - How to remove div onClick

    Hi! I would like my div to be deleted on click...

    I have the code:
    PHP Code:
    function deleteline()
    {
    this.parentNode.parentNode.removeChildthis.parentNode );
    return 
    false;

    My HTML:
    Code:
    <div>
    <input type="button" onclick="deleteline()" value="Remove this DIV" />
    </div>
    <div>
    <input type="button" onclick="deleteline()" value="Remove this DIV" />
    </div>
    <div>
    <input type="button" onclick="deleteline()" value="Remove this DIV" />
    </div>
    But it doesn't work

    Any help would be VERY VERY appreciated!

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Try
    Code:
    function deleteParentElement(n){
    n.parentNode.parentNode.removeChild(n.parentNode);
    }
    Code:
    <div>
    <input type="button" onclick="deleteParentElement(this)" value="Remove this DIV" />
    </div>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    sea4me (05-11-2009)

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    function deleteline()
    {
    this.parentNode.parentNode.removeChild( this.parentNode );
    return false;
    }
    Inside that function, the this keyword refers to the object that the function (which is also an object) is a property of. Since you declared it with the function keyword, can you guess what that might be?

    Code:
    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript">
    
    function deleteline()
    {
       alert(this);
    } 
    </script>
    <div>
    <input type="button" onclick="deleteline()" value="Who owns 'ya?" />
    </div>
    </body>
    </html>
    So, instead, as itsallkizza has done, you pass the this of the button object, which is the 'owning object' of the event handler (an anonymous function which calls 'deleteline'). Once it's 'inside' the function, you refer to it by its parameter variable - 'buttonObj' below - not this, which being context-sensitive, now points to a completely different object.

    Code:
    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript">
    
    function deleteline(buttonObj)
    {
       var node = buttonObj;
       do
       {
          node = node.parentNode;
       }
       while
          (node.nodeType != 1 && node.nodeName != 'div');
       node.parentNode.removeChild(node);
    }
    
    </script>
    <div>
    <input type="button" onclick="deleteline(this)" value="Remove this 1st DIV" />
    </div>
    <br />
    <div>
    <input type="button" onclick="deleteline(this)" value="Remove this 2nd DIV" />
    </div>
    <br />
    <div>
    <input type="button" onclick="deleteline(this)" value="Remove this 3rd DIV" />
    </div>
    </body>
    </html>
    If you hardcode your moves around the DOM tree, any changes to the document - sometimes even just adding whitespace to the HTML - can break the script. Generally better to use 'smart' routines that actually look for the item in question (in this case, an object that is both a parent element and a div element as well). hth

    http://www.howtocreate.co.uk/tutoria...ript/dombasics
    http://www.quirksmode.org/dom/intro.html
    https://developer.mozilla.org/en/tra...dom_interfaces
    Last edited by adios; 05-11-2009 at 07:57 AM.

  • Users who have thanked adios for this post:

    sea4me (05-11-2009)

  • #4
    Regular Coder sea4me's Avatar
    Join Date
    Jan 2009
    Location
    Damn, I don't know...
    Posts
    390
    Thanks
    11
    Thanked 28 Times in 27 Posts
    Thank you both!


    Now I understand everything better!!!


  •  

    Tags for this Thread

    Posting Permissions

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