刪除動態生成的文本框

Question

我有以下 javascript，它動態地將文本框和刪除按鈕一起添加到 div。 如何使用刪除按鈕刪除選中要刪除的行的內容？

<script type="text/javascript">
function GetDynamicTextBox(value) {
    return('' +
        '<div class="col-md-2">' +
        '  <input type="text" name="events[0].Key" value=""/>' +
        '</div>' +
        '<div class="col-md-2">' +
        '  <input type="text" name="events[0].Value.StartDate" value=""/>' +
        '</div>' +
        '<div class="col-md-2">' +
        '  <input type="text" name="events[0].Value.EndDate" value=""/>' +
        '</div>' +
        '<div class="col-md-2">' +
        '  <input type="text" name="events[0].Value.Description" value=""/>' +
        '</div>' +
        '<div class="col-md-2">' +
        '  <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>' +
        '</div>');
}
function AddTextBox() {
    var div = document.createElement('DIV');
    div.className = "form-group";
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("divcontent").appendChild(div);
}
function RemoveTextBox(div) {
    //document.getElementById("divcontent").removeChild(div.parentNode); // this does not work
iterateBoxesAndSetUniqueIds();
}

function iterateBoxesAndSetUniqueIds() {
    // Set unique names of each textbox
    var children = document.getElementById("divcontent").children; 
    for (i = 0; i < children.length; i++)
    {
        var el = children[i];
        el.name = 'events[' + i + '].Key'; // 
        el.id = 'events[' + i + '].Key';

        el.name = 'events[' + i + '].Value.StartDate'; 
        el.id = 'events[' + i + '].Value.StartDate';

        el.name = 'events[' + i + '].Value.EndDate'; 
        el.id = 'events[' + i + '].Value.EndDate';

        el.name = 'events[' + i + '].Value.Description'; 
        el.id = 'events[' + i + '].Value.Description';
    }
}


</script>

<button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button>

        <div id="divcontent">

        </div>

更新我添加了一個片段來更新每個文本框的 id，但顯然我在這里做錯了。 任何人都可以幫忙嗎？

Answer 1

我假設你想刪除整行，所以這里是如何做到這一點。

你幾乎擁有它，因為你在onclick中傳遞了(this) ，這意味着我們直接引用了被點擊的按鈕。 從那里，我們可以通過兩次使用.parentNode來獲取它的祖父節點（因為第一個父節點是.col-md-2 ），然后使用remove()函數。

div.parentNode.parentNode.remove()

 function GetDynamicTextBox(value) { return('' + '<div class="col-md-2">' + ' <input type="text" name="events[0].Key" value=""/>' + '</div>' + '<div class="col-md-2">' + ' <input type="text" name="events[0].Value.StartDate" value=""/>' + '</div>' + '<div class="col-md-2">' + ' <input type="text" name="events[0].Value.EndDate" value=""/>' + '</div>' + '<div class="col-md-2">' + ' <input type="text" name="events[0].Value.Description" value=""/>' + '</div>' + '<div class="col-md-2">' + ' <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>' + '</div>'); } function AddTextBox() { var div = document.createElement('DIV'); div.className = "form-group"; div.innerHTML = GetDynamicTextBox(""); document.getElementById("divcontent").appendChild(div); } function RemoveTextBox(div) { div.parentNode.parentNode.remove() }

 <button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button> <div id="divcontent"> </div>

Answer 2

 function GetDynamicTextBox(value, uniquedId) { return('' + '<div class="col-md-2">' + ' <input type="text" name="events[0].Key" value=""/>' + '</div>' + '<div class="col-md-2">' + ' <input type="text" name="events[0].Value.StartDate" value=""/>' + '</div>' + '<div class="col-md-2">' + ' <input type="text" name="events[0].Value.EndDate" value=""/>' + '</div>' + '<div class="col-md-2">' + ' <input type="text" name="events[0].Value.Description" value=""/>' + '</div>' + '<div class="col-md-2">' + ' <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(\'' + uniquedId +'\')"><i class="fa fa-angle-right"></i> Remove</button>' + '</div>'); } function AddTextBox() { var uniquedId = Math.floor(Math.random() * 100) + '_unique'; var div = document.createElement('DIV'); div.setAttribute("id", uniquedId); div.className = "form-group"; div.innerHTML = GetDynamicTextBox("", uniquedId); document.getElementById("divcontent").appendChild(div); } function RemoveTextBox(uniquedId) { var elem = document.getElementById(uniquedId); return elem.parentNode.removeChild(elem); }

 <button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button> <div id="divcontent"> </div>

<script type="text/javascript">
function GetDynamicTextBox(value, uniquedId) {
    return('' +
        '<div class="col-md-2">' +
        '  <input type="text" name="events[0].Key" value=""/>' +
        '</div>' +
        '<div class="col-md-2">' +
        '  <input type="text" name="events[0].Value.StartDate" value=""/>' +
        '</div>' +
        '<div class="col-md-2">' +
        '  <input type="text" name="events[0].Value.EndDate" value=""/>' +
        '</div>' +
        '<div class="col-md-2">' +
        '  <input type="text" name="events[0].Value.Description" value=""/>' +
        '</div>' +
        '<div class="col-md-2">' +
        '  <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(\'' + uniquedId +'\')"><i class="fa fa-angle-right"></i> Remove</button>' +
        '</div>');
}
function AddTextBox() {
    var uniquedId = Math.floor(Math.random() * 100) + '_unique';
    var div = document.createElement('DIV');
    div.setAttribute("id", uniquedId);
    div.className = "form-group";
    div.innerHTML = GetDynamicTextBox("", uniquedId);
    document.getElementById("divcontent").appendChild(div);
}
function RemoveTextBox(uniquedId) {
    var elem = document.getElementById(uniquedId);
return elem.parentNode.removeChild(elem);
}


</script>

<button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button>

        <div id="divcontent">

        </div>