javascript - 通过单击按钮删除文本框

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 + "');\"

然后像这样调用删除函数

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

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