错误的输入字段被点击按钮删除

问题描述：

似乎上页2输入域被删除通过按钮意味着上除去输入字段。我该如何解决这个问题？这里是jsFiddle上的my code - 尝试在上添加新的输入字段，然后使用上的删除按钮Page 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(); 
     } 
    }); 
});

答

当你使用（'select [name * = roomFac]'）;您选择两个下拉菜单因为您正在使用包含选择器。尝试使用选择开始（'select [name^= roomFac]'）;

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

答

你需要有更多的背景与你选择的目标正确的元素：

工作小提琴here

答

您需要每页的div来限制您的选择器相对于单击的元素。 $（这）是点击按钮，然后.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来创建行为。

错误的输入字段被点击按钮删除

相关推荐