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

Posted 2021-04-27

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

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);
}

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

答案

您可以使用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">

另一答案

以下是如何使用该元素id删除元素的示例语法

    function remove(id){
                let elem = document.getElementById(id);
                elem.parentNode.removeChild(elem);
            }

另一答案

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

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

另一答案

在newDeleteButton.name = 'deleteTextInput';之后添加这些行：

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

另一答案

输入和按钮设置在“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删除动态创建的字段的主要内容，如果未能解决你的问题，请参考以下文章

如何使用javascript删除动态创建的json对象中的多余引号？

我在使用 Javascript 或 Jquery 创建具有字符串计数的动态字段时遇到问题

Django REST框架--认证和权限

验证不适用于动态创建的值

根据下拉选择动态填充字段（Javascript / HTML）

Javascript 清理 URL 正则表达式