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>

问题 - 添加行工作正常但是当我删除时，则＆＃34;否支持此类界面＆＃34;错误即将来临。如果我没有桌子和只有一个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);

从动态表中删除行

2 个答案: