当我单击 javascript 中的删除按钮时，我想逐行删除

Question

表格.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <br>
  <br>
  <h3 class="text-center">FORM</h3>
  <br>
  <br>
  <form id="myForm">
 
    <div class="form-group">
      <label>Name</label>
      <input id="name" type="text" class="form-control form-control-sm" required /
    </div>


    <div class="form-group">
      <label>Age</label>
      <input id="age" type="text" class="form-control form-control-sm" required />
    </div>

    <div class="form-group">
      Gender:<input type="radio" name="gender" id="male" value="Male">
      <label for="male">Male</label>

      <input type="radio" name="gender" id="female" value="Female">
      <label for="female">Female</label>
    </div>

    <div class="form-group">
     <label>State</label>
  <select name="state" id="state" required>
            <option value="kerala">Kerala</option>
            <option value="tamilnadu">tamilnadu</option>
        </select>
    </div>

     <div class="form-group">
      <label>Language</label>
      <input type="checkbox" id="malayalam" name="language" value="Malayalam">Malayalam
      <input type="checkbox" id="english" name="language" value="English">English
      <input type="checkbox" id="hindi" name="language" value="Hindi">Hindi
    </div>

   <div class="form-group">
    <label>Description</label>
   <textarea cols="20" rows="5" id="description" name="description" class="form-control form-control-sm" required></textarea>
    </div>

    <button type="button" id="display" class="btn btn-sm btn-primary">Submit</button>
    <button type="reset" class="btn btn-sm btn-primary">Clear</button>
    <button type="button" onclick="DeleteRows()" id="btnDelete" class="btn btn-sm btn-primary">Delete</button>

  </form>

  <br>
  <br>

  <table class="table border" id="table">
    <tr>
      <th>Name</th>
      <th>Gender</th>
      <th>Age</th>
      <th>Language</th>
      <th>State</th>
      <th>Description</th>
    </tr>
  </table>

  <script type="text/javascript" src="form.js"></script>
</div>

表单.js

(function setup() {
  "use strict";

var myForm = document.getElementById("myForm");
  var NameElem = document.getElementById("name");
  var genderElem = document.getElementsByName("gender");
  var ageElem = document.getElementById("age");
  var languageElem = document.getElementsByName("language");
  var stateElem = document.getElementById("state");
  var descriptionElem = document.getElementById("description");
  var tableElem = document.getElementById("table");
  var selectedGender = '';
  var selectedLanguages = [];
   
  document.getElementById("display").addEventListener("click", function() {
    for(var i = 0; i < genderElem.length; i++) {
        if(genderElem[i].checked)
          selectedGender = genderElem[i].value;
     }
     
     for(var i = 0; i < languageElem.length; i++) {
        if(languageElem[i].checked)
          selectedLanguages.push(languageElem[i].value);
     }
    var newRow = tableElem.insertRow(-1);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode(NameElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(1);
    newText = document.createTextNode(selectedGender);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(2);
    newText = document.createTextNode(ageElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(3);
    newText = document.createTextNode(selectedLanguages.toString());
    newCell.appendChild(newText);
    newCell = newRow.insertCell(4);
    newText = document.createTextNode(stateElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(5);
    newText = document.createTextNode(descriptionElem.value);
    newCell.appendChild(newText);
    
    NameElem.value = "";
    genderElem.value = "";
    ageElem.value = "";
    languageElem.value = "";
    stateElem.value = "";
    descriptionElem.value = "";
    tableElem.value = "";
    selectedGender = "";
    selectedLanguages = [];
  });
})();

  form.reset(); 

[在此处输入图像描述][1] 当我单击一个删除按钮时如何在此表中逐行删除 请帮助仅使用一个删除按钮逐行删除 如何在 javascript 中执行代码 请帮我解决这个问题我不知道如何逐行删除[1]：https://i.stack.imgur.com/n8IJk.png

Answer 1

你可以像这样删除 function

function DeleteRows(){
 document.getElementById("table").deleteRow(0);

}