Question

我正在尝试通过单击按钮动态添加和删除文本框。 add()有效但remove()没有。

$ctra = 1;
function add() { 
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue');
    var num = (document.getElementById('theValue').value -1)+ 2;
    numi.value = num;
    var newdiv = document.createElement('div');
    var divIdName = 'my'+num+'Div';
    newdiv.setAttribute('id',divIdName);
    newdiv.innerHTML = "<table><tr><td width=159> Name</td>"+
            "<td> <input type='text' name='name' size=20> </td>"+
            "<td> Address </td>"+
            "<td> <input type='text' name='address' size=20> </td>"+
            "<td> Tel. No </td>"+
            "<td> <input type='text' name='telno' size=20><td> <button type='button' onclick='remove(divIdName);'>Remove</button></table>";

    if($ctra<5){
        ni.appendChild(newdiv);
        $ctra++;
    }
    $total = $ctra;
}

这是remove()。它接受div的名称。

function remove(dId) {
    var ni = document.getElementById('myDiv');
    ni.removeChild(dId);
}

请帮我解决问题。谢谢！

Answer 1

你的代码结构就是这样的

<div id='mydiv'>
  <div id='my'+num+'div'>
    //You had written table code here
  </div>
</div>

删除document.getElementById('myDiv');的子项是动态创建的'my'+num+'div'。请仔细研究

传递此divId以移除..希望你了解

Answer 2

您需要将onclick更改为以下内容：

onclick=\"remove('" + divIdName + "');\"

然后像这样调用remove函数

function remove(dId) {
  var ni = document.getElementById('myDiv');
  ni.removeChild(document.getElementById(dId));
  return false;
}

这是一个工作的jsfiddle：http://jsfiddle.net/JFzCf/5/

只需单击按钮即可删除文本框

2 个答案: