Question

当用户想要添加更多字段时，我具有创建动态字段的功能：

function addNewField()
{
    var newTextField = document.createElement('input');
    newTextField.type = 'text';
    newTextField.name = 'textInput';

    var newDeleteButton = document.createElement('input');
    newDeleteButton.type = 'button';
    newDeleteButton.value = "Delete";
    newDeleteButton.name = 'deleteTextInput';

    var newLine = document.createElement('br');

    document.getElementById('inputs').appendChild(newTextField);
    document.getElementById('inputs').appendChild(newDeleteButton);
    document.getElementById('inputs').appendChild(newLine);
}

它工作正常，但是，我必须这样做，以便“删除”按钮删除与之关联的文本框（以及“删除”按钮本身）。我怎么做？谢谢！

Answer 1

以下是有关使用元素ID删除元素的示例语法

Answer 2

在newDeleteButton按钮上添加click事件，并使用removeChild，如下所示：

    newDeleteButton.addEventListener ('click', function () {
     document.getElementById ('inputs'). removeChild (newTextField);
     document.getElementById ('inputs'). removeChild (newDeleteButton);
     document.getElementById ('inputs'). removeChild (newLine);
});

Answer 3

您可以通过两次使用this和previousElementSibling来做到这一点（但请继续阅读）：

function deleteHandler() {
    var br = this.previousElementSibling;
    var input = br.previousElementSibling;
    var parent = this.parentElement;
    parent.removeChild(this);
    parent.removeChild(br);
    parent.removeChild(input);
}

然后

    newDeleteButton.addEventListener("click", deleteHandler);

实时示例：

document.getElementById("add").addEventListener("click", addNewField, false);
function addNewField()
{
    var newTextField = document.createElement('input');
    newTextField.type = 'text';
    newTextField.name = 'textInput';

    var newDeleteButton = document.createElement('input');
    newDeleteButton.type = 'button';
    newDeleteButton.value = "Delete";
    newDeleteButton.name = 'deleteTextInput';
    newDeleteButton.addEventListener("click", deleteHandler);

    var newLine = document.createElement('br');

    document.getElementById('inputs').appendChild(newTextField);
    document.getElementById('inputs').appendChild(newDeleteButton);
    document.getElementById('inputs').appendChild(newLine);
}
function deleteHandler() {
    var br = this.previousElementSibling;
    var input = br.previousElementSibling;
    var parent = this.parentElement;
    parent.removeChild(this);
    parent.removeChild(br);
    parent.removeChild(input);
}

<div id="inputs"></div>
<input type="button" id="add" value="Add">

但是，我不会；很脆弱。相反，我将摆脱br并将文本和按钮都放在div中，然后删除div：

function deleteHandler() {
    var br = this.previousElementSibling;
    var input = br.previousElementSibling;
    var parent = this.parentElement;
    parent.removeChild(this);
    parent.removeChild(br);
    parent.removeChild(input);
}

然后

    newDeleteButton.addEventListener("click", deleteHandler);

实时示例：

document.getElementById("add").addEventListener("click", addNewField, false);
function addNewField()
{
    // *** Div to contain them
    var div = document.createElement("div");
    
    var newTextField = document.createElement('input');
    newTextField.type = 'text';
    newTextField.name = 'textInput';

    var newDeleteButton = document.createElement('input');
    newDeleteButton.type = 'button';
    newDeleteButton.value = "Delete";
    newDeleteButton.name = 'deleteTextInput';
    newDeleteButton.addEventListener("click", deleteHandler);
    
    // *** Put them in the div
    div.appendChild(newTextField);
    div.appendChild(newDeleteButton);

    // *** Add the div
    document.getElementById('inputs').appendChild(div);
}
function deleteHandler() {
    var parent = this.parentElement;
    parent.parentElement.removeChild(parent);
}

<div id="inputs"></div>
<input type="button" id="add" value="Add">

Answer 4

在newDeleteButton.name = 'deleteTextInput';之后添加以下行：

newDeleteButton.addEventListener('click', function() {
    newTextField.remove();
    this.remove();
});

Answer 5

最好将输入和按钮设置为“ div”，但您可以在删除按钮上添加click事件：

function addNewField()
{
var newTextField = document.createElement('input');
newTextField.type = 'text';
newTextField.name = 'textInput';

var newDeleteButton = document.createElement('input');
newDeleteButton.type = 'button';
newDeleteButton.value = "Delete";
newDeleteButton.name = 'deleteTextInput';
// ------ add click event to delete ------
newDeleteButton.addEventListener('click',function(e){
   var input = e.target.previousSibling;
   var br = e.target.nextSibling;
   e.target.parentNode.removeChild(e.target);
   input.parentNode.removeChild(input);
   br.parentNode.removeChild(br);
})

var newLine = document.createElement('br');

document.getElementById('inputs').appendChild(newTextField);
document.getElementById('inputs').appendChild(newDeleteButton);
document.getElementById('inputs').appendChild(newLine);
}

https://jsfiddle.net/hadies/f96xqsz0/80/

使用JavaScript删除动态创建的字段

5 个答案: