從動態表中刪除行

Question

我已經使用Javascript動態創建了一個表。我可以添加行，但不能刪除。

MyHtml：

<div id="Mutipletextboxhandler" style="text-align: center;" class="step" name="Mutipletextboxhandler">
    </div> 
        <input id="Hidden" type="hidden" runat="server" value="" />
        <input id="btnAddexisting" type="button" value="Insert item" onclick="AddmultipleTextBox()" />

而我的Javascript：

    <script type="text/javascript">
        function AddmultipleTextBox() {
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicmultipleTextBox("");
            document.getElementById("Mutipletextboxhandler").appendChild(div);
        }

        function GetDynamicmultipleTextBox(value) {

            return '<table id="d"><tr><td><input name = "mDynamicTextBox1" type="text" value = "' + value + '" /></td><td><input name = "mDynamicTextBox2" type="text" value = "' + value + '" /></td'+
            '<td><input name = "mDynamicTextBox3" type="text" value = "' + value + '" /></td>'+
            '<td><input type="button" value="Remove" onclick = "RemovemultipleTextBox(this)" /></td>' +
            '</tr></table>'
       }
    **//Problamatic Function is below:**
        function RemovemultipleTextBox(div) {        
            document.getElementById("Mutipletextboxhandler").removeAttributeNode(div);
            }
        function RecreateDynamicmultipleTextboxes() {
            var mvalues = eval('<%=mValues%>');
            if (mvalues != null) {
                var html = "";
                for (var i = 0; i < mvalues.length; i++) {
                    html += "<div>" + GetDynamicmultipleTextBox(mvalues[i]) + "</div>";
                }
                document.getElementById("Mutipletextboxhandler").innerHTML = html;
            }
        }
      window.onload = RecreateDynamicmultipleTextboxes;
</script>

問題 -添加行的工作正常，但是當我刪除時，則“不支持此類接口”錯誤來了。 如果我沒有表，只有一個texbox，它的工作正常。 有人請幫忙。

Answer 1

嘗試document.getElementById("Mutipletextboxhandler").removeChild(div)

更新：

您可以像這樣更新功能

function RemovemultipleTextBox(div) {
  while((div.tagName != "HTML" || div.tagName != "TABLE") && div.id != "d") {
    div = div.parentNode
  }
  if(div.tagName == "TABLE") {
    document.getElementById("Mutipletextboxhandler").removeChild(div.parentNode);
  }
}

Answer 2

編輯：讓我們使用適當的處理程序重做此操作。 步驟1：將類添加到輸入按鈕，然后刪除onclick。

<input class="button-remove" type="button" value="Remove" />

步驟2：在您調用GetDynamicmultipleTextBox每個位置添加此邏輯。 我們將框創建為變量，然后從該框中選擇按鈕並添加事件偵聽器。

var box = GetDynamicmultipleTextBox();
box.querySelector('.button-remove').addEventListener('click', function (event) {
    var button = event.target,
        div = button.parentNode.parentNode.parentNode.parentNode;
    document.getElementById("Mutipletextboxhandler").removeChild(div);
});

步驟3： document.getElementById("Mutipletextboxhandler").appendChild(box);