时间戳

首页 > 解决方案 > 删除动态生成的文本框

javascript - 删除动态生成的文本框

问题描述

我有以下 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，但显然我在这里做错了。任何人都可以帮忙吗？

标签： javascript

解决方案

我假设你想删除整行，所以这里是如何做到的。

您几乎拥有它，因为您传入(this)了onclick，这意味着我们可以直接引用被点击的按钮。从那里，我们可以通过使用.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>

推荐阅读