从动态表中删除行

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> 

问题行 -Addition工作正常，但是当我删除，然后 “没有这样的接口支持” 错误来了。 其工作正常，如果我没有表和只有一个texbox。 有人请帮忙。

Answer 1

尝试document.getElementById("Mutipletextboxhandler").removeChild(div)

更新：

您可以更新funtion因为这样的事情

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);