Question

我目前有以下代码，每次用户点击按钮时都会添加一个新的输入框。有没有办法创建一个按钮来删除最后生成的输入框？

var data = '<label>Temperature (K):</label><input type="number" name="temp"/>'


function addNew() {
  var newContent = document.createElement('div');
  newContent.innerHTML = data;
  document.getElementById('target').appendChild(newContent);
}

<div id="target"></div>

<input id="add" type="button" value="Add New" onclick="addNew()" />

Answer 1

将输入推送到数组中：

inputs=[];

inputs.push(newContent);
//put this in your addNew function

现在你可以从该数组中获取最后一个元素并将其删除

function remove(){
if(inputs.length>0){
elem=inputs.pop();
elem.parentNode.removeChild(elem);
}
}

Answer 2

将您添加到表单的所有内容放在包装节点中：

var data = '<span><label>Temperature (K):</label><input type="number" name="temp"/></span>'

您可以删除“目标”节点的最后一个孩子：

function removeLast() {
    document.getElementById("target").lastChild.remove();
}

Answer 3

以下是要删除已添加的div

的java脚本示例

首先，您需要创建按钮以删除新添加的行并且你需要删除它的父元素（最后添加的div）。

 var data='<label>Temperature (K):</label><input type="number" name="temp"/> <input type="button" value="Remove" onclick="removeDiv(this)"  />';


function addNew() {
   var newContent = document.createElement('div');
  newContent.innerHTML = data;
  document.getElementById('target').appendChild(newContent);
  }

function removeDiv(args){
args.parentNode.remove()
}

示例JSBIN

Answer 4

只需保留已添加元素的列表：

var data = '<label>Temperature (K):</label><input type="number" name="temp"/>'

var addedList = []; 
function addNew() {
  var newContent = document.createElement('div');
  newContent.innerHTML = data;
  addedList.push(document.getElementById('target').appendChild(newContent));
}
function removeLast() {
    if (addedList.length) {
        document.getElementById('target').removeChild(addedList.pop());
    }
}

<div id="target"></div>

<input id="add" type="button" value="Add New" onclick="addNew()" />
<input id="remove" type="button" value="Remove last added" onclick="removeLast()" />

如果您只想要最后一个元素而不是列表：

var data = '<label>Temperature (K):</label><input type="number" name="temp"/>'

var addedEl = null; 
function addNew() {
  var newContent = document.createElement('div');
  newContent.innerHTML = data;
  addedEl = document.getElementById('target').appendChild(newContent);
}
function removeLast() {
    if (null !== addedEl) {
        document.getElementById('target').removeChild(addedEl);
        addedEl = null;
    }
}

<div id="target"></div>

<input id="add" type="button" value="Add New" onclick="addNew()" />
<input id="remove" type="button" value="Remove last added" onclick="removeLast()" />

Answer 5

简单选择最后一个孩子并将其删除

function removeLast(){
 document.getElementById("target").lastChild.remove(); 
}

这是jsfiddle

https://jsfiddle.net/aqev0pu4/

Answer 6

添加：

<input id="remove" type="button" value="Remove last element" onclick="removeLastElem()" />

和

function removeLastElem() {
    document.getElementById('target').lastChild.remove()
}

EXAMPLE：）

Answer 7

跟踪最后插入的输入标记，其中一个计数器作为其id的子字符串，并通过使用计数器读取id来删除最后一个。

var inputCounter = 1;

function addNew() {
	var data = '<label>Temperature (K):</label><input type="number" id="counter' + inputCounter + '" name="temp"/>';
	inputCounter++;

	var newContent = document.createElement('div');
	newContent.innerHTML = data;
	document.getElementById('target').appendChild(newContent);
}

function removeLast() {
	if (inputCounter > 1) {
		inputCounter--;
		var last = document.getElementById("counter" + inputCounter).parentElement;
		document.getElementById('target').removeChild(last);
	} else {
		alert("Add new inputs. No last inserted input found.")
	}
}

<div id="target"></div>

<input id="add" type="button" value="Add New" onclick="addNew()" />
<input id="remove" type="button" value="Remove last added" onclick="removeLast()" />

在Javascript中添加和删除表单

7 个答案: