JS:将 EventListener 添加到动态创建的 DOM 对象中，这些对象删除 parentNode

JS: addEventListener to the dynamically created DOM objects, which delete parentNode

本文关键字：对象 parentNode 删除 DOM EventListener 添加 创建 动态 JS      更新时间：2023-09-26

我正在尝试这样做：使用几个用户输入的数字执行简单的计算，然后单击将计算添加到表中的新行中。表应有三列，用于三个数字。一切都很好，但我被困在这一点上：如何为用户添加删除某些行的选项？

所以，这将是 html 结构：

        <tbody id="tableBody">
            <tr id="row8"> <!-- In js this is ("row" + i) -->
                <td class="dimA"></td>
                <td class="dimB"></td>
                <td class="area"></td>
                <td><input type="checkbox" id="del8"></td> <!-- In js this is ("del" + i) -->
            </tr>
        </tbody>

因此，tr 元素是由 javascript 创建的，并且 ids 中的 i 在每次添加后都会递增。当用户选中复选框时，我需要能够删除整行。我知道使用 addEventListener 执行此操作的方法，但是如何使用未知数量的项目来执行此操作？

这是Javascript：

function dodajNaListu(eventInfo) {
    if (dimA & dimB !== 0) {
        var tr = document.createElement("tr");
        tr.id = "row" + i;
        var td1 = document.createElement("td");
        td1.className = "dimA";
        var A = document.createTextNode(dimA);
        td1.appendChild(A);
        var td2 = document.createElement("td");
        td2.className = "dimB";
        var B = document.createTextNode(dimB);
        td2.appendChild(B);
        var td3 = document.createElement("td");
        td3.className = "area";
        var P = document.createTextNode(rezultat);
        td3.appendChild(P);
        var td4 = document.createElement("td");
        var chck1 = document.createElement("input");
        chck1.id = "del" + i;
        chck1.setAttribute("type", "checkbox");
        td4.appendChild(chck1);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        document.getElementById("tableBody").appendChild(tr);
        i++;
    }
}

我在这个领域显然是一个新手。不，我没有使用jQuery。这实际上是我工作所需的Windows 8.1应用程序。

好的，我找到了答案。这是jsfiddle链接：http://jsfiddle.net/sez1bwL3/

我在函数 dodajNaListu 中创建的每个调用此函数的复选框中添加了一个事件侦听器：

function delRow() {
    var current = window.event.srcElement;
    while ((current = current.parentElement) && current.tagName != "TR");
    current.parentElement.removeChild(current);
}

这是我找到答案的网页链接：http://www.joegarrepy.com/tableaddrow_jscript.htm

祝你有美好的一天。

相关文章：