Question

我遇到了一些我写过的jQuery代码的问题。

Page 1 上的输入字段似乎被一个用于删除 Page 1 上的输入字段的按钮删除。我怎样才能解决这个问题呢？以下是jsFiddle上的my code - 尝试在第2页上添加新输入字段，然后使用第1页上的删除按钮。有趣的是它似乎没有相反的方式。这是我的代码：

$(document).ready(function () {
    $('#add_roomFac').click(function () {
        var $objs = $('select[name*=roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'roomFac' + n).attr('id', 'roomFac' + n);
        $obj.appendTo($('#search_fac'));
    });

    $('#remove_roomFac').click(function () {
        var $objs = $('select[name*=roomFac]');
        if ($objs.size() > 1) {
            $objs.last().remove();
        }
    });

    $('#addFac').click(function () {
        var $objs = $('select[name*=request_roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'request_roomFac' + n).attr('id', 'research_roomFac' + n);
        $obj.appendTo($('#request_fac'));
    });
    $('#removeFac').click(function () {
        var $objs = $('select[name*=request_roomFac]');
        if ($objs.size() > 1) {
            $objs.last().remove();
        }
    });
});

Answer 1

使用时（'select [name * = roomFac]'）;您选择两个下拉列表，因为您正在使用包含选择器。尝试使用带选择器的启动（'select [name ^ = roomFac]'）;

[http://jsfiddle.net/eyecode/psL2s/2/] [1]

Answer 2

您需要为选择器提供更多上下文以正确定位元素：

$('#remove_roomFac').click(function () {
    var $objs = $('#search_fac select[name*=roomFac]');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

/////////////////////////////////////////////////////

$('#removeFac').click(function () {
    var $objs = $('#request_fac select[name*=request_roomFac]');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

工作小提琴here

Answer 3

每页需要一个div来选择相对于单击元素的选择器。 $（this）是单击的按钮，.closest然后向上查找父页面，然后返回查找该页面上的选择框：

http://jsfiddle.net/psL2s/11/

$('#remove_roomFac').click(function () {
    var $objs = $(this).closest('.page').find('select[name*=roomFac] option');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

您可以将事件更改为适用于两个按钮并将此类放在按钮上： $('.remove_option').click(function () {

这允许您通过向元素添加类来创建行为，而不是在JS中硬编码ID。

单击按钮可删除错误的输入字段

3 个答案: