Javascript 我正在尝试使用JS从xml文件中删除一个元素

我正在尝试使用js从xml文件中删除一个元素。我认为问题在于，当我以html格式创建按钮时，没有注册按下按钮

对js函数的html调用

 <tbody id="demo">
                           <script>
                    setInterval("loadDoc()",1); 
                        </script>
                        </tbody>

以html格式打印表元素

function showTable(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="";
  var x = xmlDoc.getElementsByTagName("p");
  for (i = 0; i <x.length; i++) { 
    table += `<div>
        <tr>
            <td>${x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue}</td>
            <td> <img src='${x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue}.jpg' alt='${name}' style='width:100px;height:100px'></td>
            <td>${x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue} </td>
           
            <td>${x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue} / lbs</td>
            <td>
            ${x[i].getElementsByTagName("stock")[0].childNodes[0].nodeValue} 
              </td>
               <td>
               <form method='POST' action=''>
               <input type='submit' name='delete'  value='delete' /> 
               <input type='hidden' name='name' value='${x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue}'/>
                </td>
                </form> 
        </tr>
        </div>` ;
  }
  document.getElementById("demo").innerHTML = table;
}

---

我不会。。。但是您可能希望尝试类似于

函数deleteProduct（e）{e.preventDefault（）；this.parentNode.parentNode.remove（）；}

。把它写进你的表格

onsubmit

。您可能还希望使用

xmlDoc.querySelectorAll（'p'）

而不是

xmlDoc.getElementsByTagName（“p”）

，这样就不会出现实时收集问题。

function showTable(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="";
  var x = xmlDoc.getElementsByTagName("p");
  for (i = 0; i <x.length; i++) { 
    table += `<div>
        <tr>
            <td>${x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue}</td>
            <td> <img src='${x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue}.jpg' alt='${name}' style='width:100px;height:100px'></td>
            <td>${x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue} </td>
           
            <td>${x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue} / lbs</td>
            <td>
            ${x[i].getElementsByTagName("stock")[0].childNodes[0].nodeValue} 
              </td>
               <td>
               <form method='POST' action=''>
               <input type='submit' name='delete'  value='delete' /> 
               <input type='hidden' name='name' value='${x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue}'/>
                </td>
                </form> 
        </tr>
        </div>` ;
  }
  document.getElementById("demo").innerHTML = table;
}

function deleteProduct(xml){
    var xmlDoc = xml.responseXML;
    var root = xmlDoc.documentElement;
    var currNode = root.childNodes[1];
    removedNode = currNode.removeChild(currNode.childNodes[1]);
}