由于第一个搜索行无法删除,我希望将删除按钮添加到新创建的元素中,并且仅添加到该元素。
let searchRow =
'<div class="form-group">' +
'<div class="input-group first-row" data-row-value=' + rowCounter + '>' +
'<input name="text_search" class="form-control text_search" type="text"' +
' placeholder="Text To Search" required>' +
'<select class="columns-list form-control selected_column">' +
'<option disabled selected="selected" value="temp">Please wait...</option>' +
'</select>' +
'<span class="input-group-addon">' +
'<a class="search-row-button add-row" href="">' +
'<i class="fa fa-plus-circle fa-2x"></i>' +
'</a>' +
'</span>' +
'</div>';
let removeButton =
'<a class="search-row-button remove-row" href="">' +
'<i class="fa fa-times-circle fa-2x"></i>' +
'</a>';
$searchWrapper
只是一个div容器。
$(document).on('click', '.add-row', function (ev) {
ev.preventDefault();
rowCounter++;
$searchWrapper.append(searchRow);
if (rowCounter > 1) {
$('[data-row-value="'+rowCounter+'"]').find('.add-row').after(removeButton);
}
injectToSelect();
// reloadRowColumnListener();
});
我猜我在做某种错误的jquery追加,因为我既没有得到预期的结果,也没有错误。
删除行将仅追加到新添加的行的.input-group-addon
中。