html 动态文本框的值,HTML Javascript动态添加和删除文本框

我正在尝试使用javascript和HTML动态添加和删除文本框.

我可以添加和删除它,但有时“删除”按钮不起作用.当我检查元素时,它说删除按钮没有onclick值.我不明白为什么在添加功能中设置onclick时的原因.

这是我的代码：

Requirements

var reqs_id = 0;

function removeElement(elementId,elementId2) {

// Removes an element from the document

var element2 = document.getElementById(elementId2);

var element = document.getElementById(elementId);

element2.parentNode.removeChild(element2);

element.parentNode.removeChild(element);

}

function add() {

reqs_id++;// increment reqs_id to get a unique ID for the new element

//create textbox

var input = document.createElement('input');

input.type = "text";

input.setAttribute("class","w3-input w3-border");

input.setAttribute('id','reqs'+reqs_id);

var reqs = document.getElementById("reqs");

//create remove button

var remove = document.createElement('button');

remove.setAttribute('id','reqsr'+reqs_id);

remove.onclick = function() {removeElement('reqs'+reqs_id,'reqsr'+reqs_id);return false;};

remove.setAttribute("type","button");

remove.innerHTML = "Remove";

//append elements

reqs.appendChild(input);

reqs.appendChild(remove);

}

Add

解决方法:

这将起作用：

Requirements

var reqs_id = 0;

function removeElement(ev) {

var button = ev.target;

var field = button.previousSibling;

var div = button.parentElement;

div.removeChild(button);

div.removeChild(field);

}

function add() {

reqs_id++; // increment reqs_id to get a unique ID for the new element

//create textbox

var input = document.createElement('input');

input.type = "text";

input.setAttribute("class", "w3-input w3-border");

input.setAttribute('id', 'reqs' + reqs_id);

input.setAttribute('value', reqs_id);

var reqs = document.getElementById("reqs");

//create remove button

var remove = document.createElement('button');

remove.setAttribute('id', 'reqsr' + reqs_id);

remove.onclick = function(e) {

removeElement(e)

};

remove.setAttribute("type", "button");

remove.innerHTML = "Remove" + reqs_id;

//append elements

reqs.appendChild(input);

reqs.appendChild(remove);

}

Add

标签：html,javascript

来源： https://codeday.me/bug/20191025/1927147.html