Removing table row

@AliennOct 29.2012

Hello all,

Im new to javascript and i cant figure out what im doing wrong here.
I made javascript where you can put products to a table. It makes a row with product, price and delete.
This is working but, my delete button or my delete function isnt working.

Table html code:

<thead>
<tr>
<td id=”product-head”> Product </td>
<td id=”price-head”> Prijs </td>
<td id=”delete-head”> Verwijder </td>

</tr>

</thead> <tfoot> <tr> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody id=”product-list”></tbody> </table>

Here the delete function:

function deleteRow(event) {

document.getElementById(“product-list”).removeChild(event.currentTarget.parentElement);

}

Console error:

NotFoundError: Node was not found

…ument.getElementById(“product-list”).removeChild(event.currentTarget.parentEleme…

I just dont understand what im doing wrong here.
Hope someone can explain this to me!

to post a comment

JavaScript

8 Comments(s) _↴

@ReFreezedOct 29.2012 — #Don't really see anything weird... Did you add the event listeners to the td or the tr elements?

@AliennauthorOct 29.2012 — #This is the code to create the elements into the table:

var td = document.createElement("td"); 
 
 
  td.innerHTML = boodschappenItem 
 
  var boodschappenList =
  document.getElementById("product-list").appendChild(td); 
 
 
 
 
  var td = document.createElement("td");
 
  td.innerHTML = prijsItem 
 
  var boodschappenList =
  document.getElementById("product-list").appendChild(td);

You think I forgot something in here?

@AliennauthorOct 29.2012 — #Sry dont know how to edit:

Forgot this code:

var button = document.createElement("td");

var tr = document.createElement("tr");

button.setAttribute("type", "button")
  button.setAttribute ("onclick", "deleteRow(event);");
  button.appendChild(document.createTextNode ("Verwijder"));
  document.getElementById("product-list").appendChild(button);
  document.getElementById("product-list").appendChild(tr);

@ReFreezedOct 29.2012 — #Ah, right now you're adding the "button" (td element) directly to the tbody instead of adding it to the tr that you created.

[COLOR=#333333]

document.getElementById("product-list").appendChild(button);
Should be

[/COLOR][COLOR=#333333]tr.appendChild(button);

Also, setting a "type" attribute on a td element doesn't do anything. Td elements don't have a type attribute. The onclick will work anyway, as it works on any element.

Finally, at the end of your posts here there's an Edit Post button. You should also use [ code] tags for better looking code.[/COLOR]

@AliennauthorOct 29.2012 — #I chanced the button code as you said. Its now removing only the delete button, but not the product and price.

Do I need to add something to this elements to?

@AliennauthorOct 30.2012 — #Sorry I still dont see a edit button under my post (bug maybe?)

I adjust my code in this:

[CODE] 

 var productList = document.createElement("td");
 
 
 
 
  var productData = document.createElement("td");
 
 
  productData.innerHTML = boodschappenItem 
 
 
  document.getElementById("product-list").appendChild(productData); 
  productData.appendChild(productList);
 
 
 
 
  var prijsData = document.createElement("td"); 
 
 
  prijsData.innerHTML = prijsItem 
 
 
  document.getElementById("product-list").appendChild(prijsData); 
  productData.appendChild(productList);
 
 
 
 
 var verwijder = document.createElement("td"); 
 
 
 productList.setAttribute ("onclick", "deleteRow(event);");
 productList.appendChild(document.createTextNode ("Verwijder"));
 
 
 document.getElementById("product-list").appendChild(verwijder); 
 
 verwijder.appendChild(productList)
 
 
 
  var tr = document.createElement("tr");
  document.getElementById("product-list").appendChild(tr); 
 
 
 }
 
 
 
 }
 function deleteRow(event) {
 
 console.log("Function deleteRow started")
 
 document.getElementById("product-list").removeChild(event.currentTarget.parentElement);
 
 }[/CODE]

Its deleting my delete button, but not my product and price.

Guess i did something wrong in my function deleteRow?

@ReFreezedOct 30.2012 — #You're still not adding any of the [FONT=lucida console]td[/FONT] elements to the [FONT=lucida console]tr[/FONT] element. It should look something like this:

var tr = document.createElement("tr");
 document.getElementById("product-list").appendChild(tr); 
 
 
 tr.appendChild(productList);
 tr.appendChild(productData);
 tr.appendChild(prijsData);
 tr.appendChild(verwijder);

Your deleteRow function looks correct. event.currentTarget should be the td, which means event.currentTarget.parentElement should be a tr element. You can always alert an element's [FONT=lucida console]tagName[/FONT] attribute to see what kind of tag it is.

(And it's weird, the Edit button seems to be gone for me too! It was just there some days ago.. :S )

@AliennauthorOct 31.2012 — #Its working! Thank you so much for your time and help! I finally understand what was wrong with my code ;D

Also in #JavaScript _↴

Change Color of a Certain Character Type?hiding divs dynamic pages

Success!

Help @Alienn spread the word by sharing this article on Twitter...

Tweet This

Removing table row

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Removing table row

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴