JQuery - 动态隐藏按钮的第一个实例答案

【问题标题】：JQuery - Hide the first instance of button dynamicallyJQuery - 动态隐藏按钮的第一个实例
【发布时间】：2016-12-08 18:15:06
【问题描述】：

我正在尝试动态隐藏按钮的第一个实例（关闭符号参考屏幕截图）。即我正在使用我在点击时调用的javascript函数创建由按钮组成的div。我想隐藏按钮的第一个实例。尝试使用 jquery :first 选择器，但是当我使用 on click 方法添加 div 时，第二个实例的按钮也会消失。我应该怎么做才能只隐藏关闭按钮的第一个实例？

我的 JQuery 代码：

$("#box button:first").hide();

HTML 代码：

<div id="box" class="box-body" role="dynamic-fields">
<div class="inline-form" id="inline-form">
    <div id="clone" class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label style="" for="inputPackageName" class="col-sm-3 control-label">
                    Package Name</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="inputPackageName" placeholder="Package Name">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div id="sample" class="form-group">
                <label style="margin-left: -8%;" for="inputApplicationName" class="col-sm-3 col-md-4 control-label">
                    Application Name</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="inputApplicationName" placeholder="Package Name">
                </div>
                <button id="btn-close" class="btn btn-box-tool">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

在您的 html 中只有 1 个按钮元素
如果我理解正确，您希望在添加新 div 后隐藏的关闭按钮再次可见？
请注意，id 必须在每个文档中都是唯一的。您不能有两个具有相同id 值的元素。因此，您可以在每个文档中仅使用您的 id 值 once* ，例如#box、#sample、#inline-form、#clone。你可能过度滥用id。
@guradio 当前div中只有一个按钮，其他按钮会在用户点击添加按钮时动态生成。参考截图。
查看您的示例，我猜您的页面中有重复的 ID。这永远不会与 jQuery 一起工作，因为它只会找到第一个匹配项。

标签： javascript jquery html css

【解决方案1】：

你可以给你的关闭按钮一个自定义类，像这样：

<button id="btn-close" class="btn btn-box-tool closebutton">
     <i class="fa fa-times"></i>
</button>

然后执行以下操作：

$(".closebutton").show();
$(".closebutton:first").hide();

这将显示除第一个之外的所有关闭按钮。每次添加或删除 div 时只需执行该代码即可。

【讨论】：

非常感谢.. 为我解决了.. 除了必须在添加 div 方法之前再次调用 hide() 方法，以便只有单个 div 时关闭按钮不可见.
这无法解决重复的id 问题。甚至button 也有id="btn-close"，OP 可能在每个.box-body 中重复。

【解决方案2】：

缩小范围选择器

$(".form-group:first button:first").hide();

这将适用于第一个 form-group 分类 div 中的第一个按钮。

【讨论】：

【解决方案3】：

试试这个

$(".box-body").find("button:first").hide();

【讨论】：

与原版没有区别。最可能的原因是页面中的 ID 重复（无法正确匹配）

【解决方案4】：

你有一个唯一的 id 样本

您可以执行以下操作：

$('#sample').find('button').hide();

或者根据第一个#clone元素进行选择

$('.inline-form row:first-child').find('button').hide();

【讨论】：

【解决方案5】：

您也可以使用它。它使用按钮的类来处理 click 事件。 Fiddle

$(".btn-box-tool").click(function() {
  $("#box button:first").hide();
});

【讨论】：