jQuery追加仅适用于数据行和子类之后

时间:2018-11-22 16:46:13

标签: javascript jquery

由于第一个搜索行无法删除,我希望将删除按钮添加到新创建的元素中,并且仅添加到该元素。

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中。

0 个答案:

没有答案