Löschen Sie eine Zeile mit JavaScript

Ich habe einen JavaScript-Code geschrieben, um Lebensmittel in die Liste hinzuzufügen. Für jedes Essen in der Reihe gibt es einen Löschknopf. Aber wenn ich den Knopf drücke passiert nichts. Ich kann den Fehler im Code nicht finden. Ich habe den Button in newRow.innerHtml + = ... mit id = "delete" definiert. Ich habe auch eine Methode deleteRow (Element), aber aus irgendeinem Grund wird es nicht löschen. Kann mir jemand helfen, das Problem zu finden? Löschen Sie eine Zeile mit JavaScript

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

Quelle

2017-11-05 Marc

Es funktioniert wie eine Variable an die 'deleteRow()' Funktion aufrufen müssen passieren aussieht. Ich vermute, dass die richtige Variable 'this' ist, also könnten Sie in Ihrem Click-Handler schreiben' deleteRow (this) ' – Nick

Kein Unterschied hat den Fehler" Uncaught ReferenceError: deleteRow ist nicht definiert " – Marc

Ihre Handler sind auf verschiedene Arten hinzugefügt. Ich habe es hier repariert: https://jsfiddle.net/feLgharu/ – dersvenhesse

Dies sollte

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

Quelle

2017-11-05 15:15:52 AngYC

vielen dank !! – Marc

Löschen Sie eine Zeile mit JavaScript

Antwort

Verwandte Themen