www.webdeveloper.com
Results 1 to 9 of 9

Thread: Removing table row

  1. #1
    Join Date
    Oct 2012
    Posts
    6

    Removing table row

    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!

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Don't really see anything weird... Did you add the event listeners to the td or the tr elements?

  3. #3
    Join Date
    Oct 2012
    Posts
    6
    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?

  4. #4
    Join Date
    Oct 2012
    Posts
    6
    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);

  5. #5
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Ah, right now you're adding the "button" (td element) directly to the tbody instead of adding it to the tr that you created.

    Code:
    document.getElementById("product-list").appendChild(button);
    Should be
    Code:
    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.

  6. #6
    Join Date
    Oct 2012
    Posts
    6
    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?

  7. #7
    Join Date
    Oct 2012
    Posts
    6
    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);
                
    }
    Its deleting my delete button, but not my product and price.
    Guess i did something wrong in my function deleteRow?

  8. #8
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    You're still not adding any of the td elements to the tr element. It should look something like this:

    Code:
    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 )

  9. #9
    Join Date
    Oct 2012
    Posts
    6
    Its working! Thank you so much for your time and help! I finally understand what was wrong with my code ;D

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles