javascript - 如何使用javascript删除加号按钮

Question

我正在从数据库中获取带有值的输入字段。见以下代码:

<input type="text" class="input-medium" name="demoname" id="demo_1" value="txt1"/>
<button type="button" class="btn id="plus_1"><span class="icon" id="add1">Plus</span> </button>
<input type="text" class="input-medium" name="demoname" id="demo_2" value="txt2"/>
<button type="button" class="btn id="plus_2"><span class="icon " id="add2">Plus</span></button>
<input type="text" class="input-medium" name="demoname" id="demo_3" value="txt3"/>
<button type="button" class="btn id="plus_3"><span class="icon " id="add3">Plus</span></button>

现在，我需要在页面打开时显示第一个加号按钮。我希望隐藏其余的加号按钮。

从数据库中获取的输入将是 n 个数字。因此，每当有任何新数据来自数据库时，它也必须只显示第一个加号按钮。其他按钮必须隐藏。

输入字段是动态创建的。

Answer 1

您缺少 " 来关闭您的按钮类:

<button type="button" class="btn" id="plus_1">
// ---------------------------  ^ here 

然后您可以应用 CSS 来隐藏您所有的默认类 btn 的按钮:

.btn {
    display: none;
}

然后使用 .first() 显示第一个按钮:

$('.btn').first().show();

或 :first 选择器:

$('.btn:first').show(); 

如果您更喜欢纯 jQuery 解决方案，您可以使用:

$('.btn').hide().first().show();

如果你想使用纯 CSS 方法，那么:

.btn:not(:first-of-type) { 
    display: none; 
}