[英]Remove dynamically generated textboxes
I have the following javascript that dynamically add textboxes together with a remove button to a div.我有以下 javascript,它动态地将文本框和删除按钮一起添加到 div。 How can I using the remove button delete the content of the row being selected to delete?
如何使用删除按钮删除选中要删除的行的内容?
<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>
UPDATE I added a snippet for updating the id for each textbox, but obviously I am doing something wrong here.更新我添加了一个片段来更新每个文本框的 id,但显然我在这里做错了。 Can anyone help with this too?
任何人都可以帮忙吗?
I assume you want to remove the entire row, so heres how to do that.我假设你想删除整行,所以这里是如何做到这一点。
You almost had it, since you pass (this)
in the onclick
, it means we have a direct reference to the button that was clicked.你几乎拥有它,因为你在
onclick
中传递了(this)
,这意味着我们直接引用了被点击的按钮。 From there, we can get its grandparent by using .parentNode
twice (since the first parent is .col-md-2
) and then use the remove()
function.从那里,我们可以通过两次使用
.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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.