Removing table row

[Alienn]

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:

<table id="schema">
<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!

[ReFreezed]

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

[Alienn]

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?

[Alienn]

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

[ReFreezed]

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

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

Should be

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.

[Alienn]

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?

[Alienn]

Sorry I still dont see a edit button under my post (bug maybe?)
I adjust my code in this:

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

Its deleting my delete button, but not my product and price.
Guess i did something wrong in my function deleteRow?

[ReFreezed]

You're still not adding any of the td elements to the tr 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 tagName 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 )

[Alienn]

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