Deleting Paragraphs Using Nodes

**timpers69** · Apr 20, 2007, 05:46

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

**Raffles** · Apr 20, 2007, 06:49

Try this:

Code:

 function DelLastItem() {
        allParas = document.getElementsByTagName("p");
        killPara  = allParas[allParas.length-1];
        docBody = document.getElementsByTagName("body")[0];
        erasePara = docBody.removeChild(killPara);
        }

**Pepejeria** · Apr 20, 2007, 07:03

why not just access the body directly (document.body)?

**Kravvitz** · Apr 20, 2007, 07:35

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);
}

**Raffles** · Apr 20, 2007, 08:10

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.

**Kravvitz** · Apr 20, 2007, 08:18

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.

**timpers69** · Apr 21, 2007, 03:10

Originally Posted by Kravvitz

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!

**SimplyFu** · Apr 21, 2007, 04:02

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.

**Raffles** · Apr 21, 2007, 05:32

Thanks Kravvitz. And array syntax is much nicer.

The SitePoint Forums have moved.

User Tag List

Thread: Deleting Paragraphs Using Nodes

Thread Tools

Display

Deleting Paragraphs Using Nodes

Bookmarks

Bookmarks

Posting Permissions