Delete a row with JavaScript

Question

I have written a JavaScript code to add foods into the list. For every food in the row there is a delete button. But if I push the button nothing happens. I cannot find the error in the code. I defined the button in newRow.innerHtml +=... with id="delete". I have also a method deleteRow(element) but for some reason it won't delete. Can someone help me finding the problem?

<html>
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Test</title>
    
    <link rel="stylesheet" href="style.css" />
    
</head>

<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 2px;}

tr:nth-child(even) {
background-color: #dddddd;}
</style>
<body>
   
                    <h3>Foods</h3>

                    <table id="table">
                        <tr>
                        <th>Name</th>
                        <th>Ingredients</th>
                        <th>Meat</th>
                        <th>Vegetarian</th>
                        <th>Vegan</th>
                        </tr>
                    </table>

                </section>

                <br><br>

                <!-- FORMULAR -->
                <section>

                    <h3>New food</h3>

                    
                        <p>Name: <input type="text" id="name" />
                        <p>Ingredients: <input type="text" id="ingredients" />
                        <br><br>
                        <input type="radio" id="meat" name="select" value="meat" />
                        <label for="meat">Meat</label>
                        <input type="radio" id="veg" name="select" value="vegetarian" />
                        <label for="veg">vegetarian</label>
                        <input type="radio" id="vegan" name="select" value="vegan" />
                        <label for="vegan">vegan</label>  
                        <p>Passwort: <input type="password" id="passwd" />
                        <button id="add" onclick="Add()">Add</button> 

                        
                    
                            <script>
                            let table = document.getElementById("table");
                            document.addEventListener('DOMContentLoaded', registerCallbacks);

                            function registerCallbacks(){
                            function Add() {
                            var newRow = document.createElement('tr');
                            var name = document.getElementById("name").value;
                            var ingredients = document.getElementById("ingredients").value;
                            var pw = document.getElementById("passwd").value;
                            var rObj = document.getElementsByName("select");
                            var vegetarian = rObj[1].checked;
                            var meat = rObj[0].checked;
                            var vegan = rObj[2].checked;
                            newRow.innerHTML += "<td>" + name + "</td><td>" + ingredients +"</td><td>" + meat+ "</td><td>" + vegetarian +"</td><td>" + vegan + "</td><td>" + '<button id="delete" onclick="deleteRow(this)">Delete Row</button>'
                            document.getElementById("table").appendChild(newRow);
                            }
                            var addButton = document.getElementById('add');
                            addButton.addEventListener( 'click', function(evt){Add(); evt.preventDefault();});
                            
                            
                        var deleteButton = document.getElementById('delete');
                        deleteButton.addEventListener('click', function(evt){deleteRow(this); evt.preventDefault();});
                                
                        function deleteRow(btn) {
                        var row = btn.parentNode.parentNode;
                        row.parentNode.removeChild(row);
                        }
                                
                      
                    }
                            </script>
                </section>

            </article>

        </main>    

        <!-- FOOTER -->
        <footer>

            <p>&copy; Copyright 2017</p>

        </footer>
        
    </div>
    
  
                   

    
</body>
</html>

It looks like you need to pass a variable to the deleteRow() function call. I suspect the correct variable will be this, so in your click handler you could write deleteRow(this) — Nick
– Nick, Commented Nov 5, 2017 at 15:10
No difference got the error "Uncaught ReferenceError: deleteRow is not defined" — Marc
– Marc, Commented Nov 5, 2017 at 15:15
Your handlers are added in multiple ways. I fixed it here: jsfiddle.net/feLgharu — dersvenhesse
– dersvenhesse, Commented Nov 5, 2017 at 15:17

AngYC · Accepted Answer · 2017-11-05 15:15:52Z

This should work

<body>
    <!-- FORMULAR -->
    <section>
        <table id="table">
            <tr>
            <th>Name</th>
            <th>Ingredients</th>
            <th>Meat</th>
            <th>Vegetarian</th>
            <th>Vegan</th>
            </tr>
        </table>

        <h3>New food</h3>
        <p>Name: <input type="text" id="name" />
        <p>Ingredients: <input type="text" id="ingredients" />
        <br><br>
        <input type="radio" id="meat" name="select" value="meat" />
        <label for="meat">Meat</label>
        <input type="radio" id="veg" name="select" value="vegetarian" />
        <label for="veg">vegetarian</label>
        <input type="radio" id="vegan" name="select" value="vegan" />
        <label for="vegan">vegan</label>  
        <p>Passwort: <input type="password" id="passwd" />
        <button id="add" onclick="return addRow()">Add</button> 

        <script>
            var table = document.getElementById("table");

            function addRow() {
                var newRow      = document.createElement('tr'),
                    name        = document.getElementById("name").value,
                    ingredients = document.getElementById("ingredients").value,
                    pw          = document.getElementById("passwd").value,
                    rObj        = document.getElementsByName("select"),
                    vegetarian  = rObj[1].checked,
                    meat        = rObj[0].checked,
                    vegan       = rObj[2].checked;

                newRow.innerHTML += "<td>" + name + "</td><td>" + ingredients +"</td><td>" + meat+ "</td><td>" + vegetarian +"</td><td>" + vegan + "</td><td>" + '<button id="delete" onclick="return deleteRow(this)">Delete Row</button>'
                document.getElementById("table").appendChild(newRow);
                return false;
            }

            function deleteRow(btn) {
                var row = btn.parentNode.parentNode;
                row.parentNode.removeChild(row);
                return false;
            }
        </script>
    </section>
</body>

Collectives™ on Stack Overflow

Delete a row with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related