SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member timpers69's Avatar
    Join Date
    May 2006
    Location
    Ramsbottom
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Deleting Paragraphs Using Nodes

    I just want to delete the last paragraph on the page, when I press a button. My code just causes an invalid argument error. I'm new to this so can anyone tell me what I'm doing wrong?

    function DelLastItem() {
    allParas = document.getElementsByTagName("p");
    killPara =allParas.item(allParas.length-1);
    docBody = document.getElementsByTagName("body").item(0);
    erasePara = docBody.removeChild(killPara);
    }
    Any advice would be great, Thank You

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
     function DelLastItem() {
            allParas = document.getElementsByTagName("p");
            killPara  = allParas[allParas.length-1];
            docBody = document.getElementsByTagName("body")[0];
            erasePara = docBody.removeChild(killPara);
            }

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not just access the body directly (document.body)?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles, your code is the same, except you used array syntax instead of item().

    I suspect the problem is that <body> isn't the parent of all of the <p>s.

    Try this.
    Code:
    function DelLastItem() {
      var allParas = document.getElementsByTagName("p");
      var killPara = allParas[allParas.length-1];
      var erasePara = killPara.parentNode.removeChild(killPara);
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, I thought it was because using item(x) was only for getElementsByName but I just looked it up and realised I'm wrong. I also thought removeChild was for any child, not just a first generation descendant, even though I've always used it in the latter way.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's an easy mistake to make. allParas may act like an array but it's really a NodeList. I often find it annoying that Array methods don't apply to NodeLists.

    In the JavaScript binding of the DOM, item() isn't needed because array syntax can be used instead.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Member timpers69's Avatar
    Join Date
    May 2006
    Location
    Ramsbottom
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Raffles, your code is the same, except you used array syntax instead of item().

    I suspect the problem is that <body> isn't the parent of all of the <p>s.

    Try this.
    Code:
    function DelLastItem() {
      var allParas = document.getElementsByTagName("p");
      var killPara = allParas[allParas.length-1];
      var erasePara = killPara.parentNode.removeChild(killPara);
    }
    Thank you for the help with Nodes. I couldn't see what I was doing wrong. Your explanation , made it click for me, it's been driving me mad. I didn't just want to just copy someone elses code, I wanted to work out what, I'd missed and you nailed it!

  8. #8
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is a catch, you try to click the button as fast as you can. First click and second click come almost the same time, hence they refer to the same number as allParas.length being called. First call of DelLastItem function will get the element deleted. but the second call will get null element.

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Kravvitz. And array syntax is much nicer.


Bookmarks

Posting Permissions

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