在JavaScript中动态删除行

我正在做一个表单（一个简单的WEB表单，基于Tom Negrino、JavaScript 8和w3Schools的脚本），用户按下Submit按钮，表单中的一些字段显示在表单下的一个表中

这就是结果

现在，我想删除该行，但只删除用户要删除的行，单击相应的行

这是我的JavaScript

window.onload = initForms;

function initForms() {
    for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = validForm;
    }
    document.getElementById("sunroof").onclick = doorSet;

    document.getElementById("estado").selectedIndex = 0;
    document.getElementById("estado").onchange = populateDays;

    /***********/
    //document.getElementsByTagName("form")[0].onsubmit = addNode;
    /***********/

    document.getElementById("env").onclick = function() {
        myFunction()
    };

}

function validForm() {
    var allGood = true;
    var allTags = document.getElementsByTagName("*");

    for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
            allGood = false;
        }
    }
    return allGood;

    function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split(" ");

        for (var j=0; j<allClasses.length; j++) {
            outClass += validBasedOnClass(allClasses[j]) + " ";
        }

        thisTag.className = outClass;

        if (outClass.indexOf("invalid") > -1) {
            invalidLabel(thisTag.parentNode);
            thisTag.focus();
            if (thisTag.nodeName == "INPUT") {
                thisTag.select();
            }
            return false;
        }
        return true;

        function validBasedOnClass(thisClass) {
            var classBack = "";

            switch(thisClass) {
                case "":
                case "invalid":
                    break;
                case "reqd":
                    if (allGood && thisTag.value == "") {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                case "radio":
                    if (allGood && !radioPicked(thisTag.name)) {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                case "email":
                    if (allGood && !validEmail(thisTag.value)) classBack = "invalid ";
                    break;
                case "isNum":
                case "isZip":
                    classBack += thisClass;
                    break;
                default:
                    if (allGood && !crossCheck(thisTag,thisClass)) {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
            }
            return classBack;
        }

        function crossCheck(inTag,otherFieldID) {
            if (!document.getElementById(otherFieldID)) {
                return false;
            }
            return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
        }

        function validEmail(email) {
            var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

            return re.test(email);
        }

        function radioPicked(radioName) {
            var radioSet = "";

            for (var k=0; k<document.forms.length; k++) {
                if (!radioSet) {
                    radioSet = document.forms[k][radioName];
                }
            }
            if (!radioSet) {
                return false;
            }
            for (k=0; k<radioSet.length; k++) {
                if (radioSet[k].checked) {
                    return true;
                }
            }
            return false;
        }

        /****Veamos si esto funciona****/

        /*function checkboxPicked(checkboxName) {
            var checkboxSet = "";

            for (var k = 0; k < document.forms.length; k++) {
                if (!checkboxSet) {
                    checkboxSet = document.forms[k][checkboxName];
                }
            }
            if (!checkboxSet) {
                return false;
            }
            for ( k = 0; k < checkboxSet.length; k++) {
                if (checkboxSet[k].checked) {
                    return true;
                }
            }
            return false;
        }*/

        /*****************************************/

        function invalidLabel(parentTag) {
            if (parentTag.nodeName == "LABEL") {
                parentTag.className += " invalid";
            }
        }
    }
}

function populateDays() {
    var tamps = new Array("Ikon Hatch", "Fiesta", "Focus", "Mustang");
    var nvoleon = new Array("Aveo", "Spark");
    var slp = new Array("Gol", "CrossFox", "Clasico", "Jetta");

    var estado = document.getElementById("estado");
    var estadoStr = estado.options[estado.selectedIndex].value;

    if (estadoStr != "") {
        var valueEst = parseInt(estadoStr);
        document.getElementById("ciudad").options.length = 0;

        if (valueEst == 0) {
            for (var i = 0; i < tamps.length; i++) {
                document.getElementById("ciudad").options[i] = new Option(tamps[i]);
            }
        } else if (valueEst == 1) {
            for (var i = 0; i < nvoleon.length; i++) {
                document.getElementById("ciudad").options[i] = new Option(nvoleon[i]);
            }
        } else if (valueEst == 2) {
            for (var i = 0; i < slp.length; i++) {
                document.getElementById("ciudad").options[i] = new Option(slp[i]);
            }
        }
    } else {
        document.getElementById("ciudad").options.length = 0;
        document.getElementById("ciudad").options[0] = new Option("Model");
    }
}

function doorSet() {
    if (this.checked) {
        document.getElementById("twoDoor").checked = true;
    }
}

/*****************************/

/*function addNode() {
    var inText = document.getElementById("estado").value;
    var inText1 = document.getElementById("ciudad").value;

    var newText = document.createTextNode(inText);
    var newText1 = document.createTextNode(inText1);

    var newGraf = document.createElement("table");
    newGraf.appendChild(newText);
    newGraf.appendChild(newText1);

    var docBody = document.getElementsByTagName("body")[0];
    docBody.appendChild(newGraf);

    return false;
}*/

function myFunction() {
    var table = document.getElementById("myTable");

    var email= document.getElementById("emailAddr").value;
    var brand=document.getElementById("estado").value;
    var model=document.getElementById("ciudad").value;

    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = email;
    cell2.innerHTML = model;
    cell3.innerHTML = brand;
}

删除到第行，但不起作用

---

我将感谢任何帮助。谢谢。

如果要基于对某一行的单击来删除该表行，可以使用以下方法：

<tr onclick="this.parentNode.removeChild(this)">

辅助函数

// Return first ancestor of el with tagName
// or undefined if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }

  // Many DOM methods return null if they don't
  // find the element they are searching for
  // It would be OK to omit the following and just
  // return undefined
  return null;
}

deleteRow函数可以放在行中的任何位置，该行可以位于任何类型的表节元素（head、body或foot）中。您所需要做的就是传递对行中任何元素（按钮、复选框、单元格等）的引用

table.deleteRow方法的问题在于，您必须知道调用该方法的元素中的行索引。行有一个rowIndex属性，该属性是它们所在表中的索引，因此您必须转到表中才能使用该属性（即row.parentNode.parentNode），而使用该方法不需要您确定行在表中的位置，甚至不需要知道父项是头部、身体还是足部

编辑 要动态添加侦听器，您可以稍微修改函数，并向按钮添加一个类以删除行，例如

<!-- Sample markup -->
<table>
  <tr>
    <td><input type="button" class="rowDeleter" value="Delete Row">
  <tr>
    <td><input type="button" class="rowDeleter" value="Delete Row">
  <tr>
    <td><input type="button" class="rowDeleter" value="Delete Row">
</table>

添加一个类意味着您可以轻松地识别要添加侦听器的元素

<script>
window.onload = function() {

  // querySelectorAll and addEventListener require IE 8 or higher, use some other
  // method if support for older browsers is required
  var els = document.querySelectorAll('.rowDeleter');

  for (var i=0, iLen=els.length; i<iLen; i++) {
    els[i].addEventListener('click', deleteRow, false);
  }
}

// When attached using addEventListener, this in the function
// will be the element that called the listener    
function deleteRow() {
  var row = upTo(this, 'tr');
  if (row) row.parentNode.removeChild(row);
}

// Previously shown helper
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

</script>

window.onload=函数（）{
//QuerySelector和addEventListener要求IE 8或更高版本，请使用其他
//方法，如果需要支持较旧的浏览器
var els=document.querySelectorAll（'.rowDeleter'）；
对于（var i=0，iLen=els.length；我能创建一个Fiddle吗？cell4在哪里定义？该方法要求删除行的索引。请不要使用，使用用于相关规范和/或用于实现细节和示例。下面是一个与代码相关的Fiddle：不添加额外的JS，我修复了一些输入元素b使用
/
@user145400“关闭”空元素添加
/
并不会为标记添加（或修复）任何有用的内容，它在HTML文档中被视为无用的垃圾。@RobG是的。ArCiGo:别看我，这是你的代码：）我正在使用一个外部的.js。我怎么能把这些放在我的代码上呢？我对DOM不是很熟悉（但我了解你一些事情）。通过搜索和询问，我终于解决了我的问题：…感谢所有的一切，并为不便道歉。我更愿意回答一些解释，而不仅仅是代码。
function deleteRow(element) {
  var row = upTo(element, 'tr');
  if (row) row.parentNode.removeChild(row);
}

// Return first ancestor of el with tagName
// or undefined if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }

  // Many DOM methods return null if they don't
  // find the element they are searching for
  // It would be OK to omit the following and just
  // return undefined
  return null;
}

<!-- Sample markup -->
<table>
  <tr>
    <td><input type="button" class="rowDeleter" value="Delete Row">
  <tr>
    <td><input type="button" class="rowDeleter" value="Delete Row">
  <tr>
    <td><input type="button" class="rowDeleter" value="Delete Row">
</table>

<script>
window.onload = function() {

  // querySelectorAll and addEventListener require IE 8 or higher, use some other
  // method if support for older browsers is required
  var els = document.querySelectorAll('.rowDeleter');

  for (var i=0, iLen=els.length; i<iLen; i++) {
    els[i].addEventListener('click', deleteRow, false);
  }
}

// When attached using addEventListener, this in the function
// will be the element that called the listener    
function deleteRow() {
  var row = upTo(this, 'tr');
  if (row) row.parentNode.removeChild(row);
}

// Previously shown helper
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

</script>

var node = nodes[0];
if (univArray[z].ownership != "public") {
    node.parentNode.removeChild(node)
}