[英]Dynamically created select2 not getting removed on button click
我需要動態生成和刪除select2。
現在,我能夠成功地在按鈕單擊上添加select2,但是當用戶單擊“刪除”按鈕時,我還需要刪除動態創建的select2。
到目前為止,僅動態生成的文本框被刪除,該文本框位於我正在使用其ID訪問的select2旁邊。
我嘗試訪問與已轉換為select2的“ select”相關的類以及ID,但仍未刪除select2。
以下是腳本:
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '400px', border: '1px solid',
borderTopColor: '#999', float: 'left', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
var iCnt = 0;
function add()
{
if (iCnt <= 19) {
iCnt = iCnt + 1;
$(container).append($("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>"));
//Add Property Selector
$(container).append(" ");
$(container).append($("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>"));
//$('.selinput2' + iCnt).select2({width : '20%'});
$(container).append(" ");
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' +
'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
// Initialize select2
$('select').select2({width : '20%'});
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
}
function remove() {
if (iCnt != 0) {
console.log($(container).closest());
$('#tbtext' + iCnt).remove();
$('#add' + iCnt).remove();
//$('select').select2({width : '20%'}).remove();
$('#tb2' + iCnt).remove();
iCnt = iCnt - 1; }
if (iCnt == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
}
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
以下是jsFiddle的鏈接:
https://jsfiddle.net/zjafvr3u/4/
請提出建議。
看到這里: JSFiddle
我所做的就是在div中創建所有元素,這使得一次刪除整個行變得更加容易。
$(container).append('<div class="row"></div>');
$(".row:last").append("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>");
//Add Property Selector
$(".row:last").append(" ");
$(".row:last").append("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>");
//$('.selinput2' + iCnt).select2({width : '20%'});
$(".row:last").append(" ");
// ADD TEXTBOX.
$(".row:last").append('<input type=text class="input" id=tbtext' + iCnt + ' ' +
'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>');
而在刪除時,只需使用以下內容
$('.row:last').remove();
在Css Select2row
添加一個類以使用Div。此div內的select2下拉列表為此ID分配ID。
在這里 觀看現場演示
更新CSS
.Select2row
{
display:inline;
}
更新您的腳本
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '400px', border: '1px solid',
borderTopColor: '#999', float: 'left', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
var iCnt = 0;
function add()
{
if (iCnt <= 19) {
iCnt = iCnt + 1;
$(container).append($("<div class='Select2row' id=tb" + iCnt + " ><select class ='selinput'" + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'></div>"));
//Add Property Selector
$(container).append(" ");
$(container).append($(" <div class='Select2row' id=tb2" + iCnt + " ><select class ='selinput2" + iCnt + "'' " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>"));
//$('.selinput2' + iCnt).select2({width : '20%'});
$(container).append(" ");
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' +
'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br></div>');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
// Initialize select2
$('select').select2({width : '20%'});
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
}
function remove() {
if (iCnt != 0) {
console.log($(container).closest());
$('#tbtext' + iCnt).remove();
$('#tb2' + iCnt).remove();
$('#tb' + iCnt).remove();
iCnt = iCnt - 1; }
if (iCnt == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
}
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.