使用JavaScript刪除動態創建的字段

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刪除元素的示例語法

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

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 來做到這this （但請繼續閱讀）：

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.name = 'deleteTextInput'; ：

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

Answer 5

最好將輸入和按鈕設置為“ div”，但您可以在delete button上添加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/