JS：addEventListener 到动态创建的 DOM 个对象，删除 parentNode

Question

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

所以，这将是 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 应用程序。

Answer 1

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

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

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

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

祝你有愉快的一天。

JS：addEventListener 到动态创建的 DOM 个对象，删除 parentNode

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

javascript

row

html-table