Javascript 如何隐藏定位标记并在同一位置显示另一个定位标记

我在JSP中定义了以下锚属性。单击“将所有计划添加到购物车”后，我希望“将所有计划添加到购物车”按钮隐藏，并将“从购物车中删除所有计划”显示在与“将所有计划添加到购物车”相同的位置

隐藏和显示工作正常。但“从购物车中删除所有计划”将显示在下一行。我希望它完全取代“将所有计划添加到购物车”按钮。我在Javascript文件中尝试了各种方法，包括document.getElementById和内联、内联块ete，但都不起作用

谢谢你的意见，谢谢

JSP

---

引导按钮最好用在它们自己的元素中，尝试将它们包装到另一个元素中，然后被代码隐藏

<span id="selectAll" style="margin-left:10px">
  <a class="primaryButton btn btn-small">
    Add All Plans To Cart
  </a>
</span>

<span id="removeAll" style="margin-left:10px; display:none">
  <a class="primaryButton btn btn-small">
    Remove All Plans From Cart
  </a>   
</span>

将所有计划添加到购物车
从购物车中删除所有计划

浮动两个按钮怎么样，如果这没有帮助，您应该在某个地方公开您的所有代码，JSFIDLE 比如说

#selectAll, #removeAll {
    float: left;
}

---

jQuery中没有什么错误。您缺少结尾的圆括号）和分号。因此，jQuery应该如下所示：

jQuery:

现在，正如我在下面的小提琴中尝试的那样，锚显示在相同的位置。因此，您的css代码可能有问题

---

共享css代码以获得详细的解决方案

hide（）

做同样的事情没有

display

属性，你是说

.css（）

？你说得对，我检查了jquery.hide（）做同样的事情，编辑了我的回答谢谢。但当我点击“将计划添加到购物车”按钮时，我仍然在下一行看到“从购物车中删除所有计划”按钮。此外，我注意到，如果我将文本从“从购物车中删除所有计划”编辑为“删除所有计划”，按钮将出现在同一行中，后面只有一小部分空间。

<span id="selectAll" style="margin-left:10px">
  <a class="primaryButton btn btn-small">
    Add All Plans To Cart
  </a>
</span>

<span id="removeAll" style="margin-left:10px; display:none">
  <a class="primaryButton btn btn-small">
    Remove All Plans From Cart
  </a>   
</span>

#selectAll, #removeAll {
    float: left;
}

$("#selectAll").click(function () {
     $("#selectAll").hide();
     $("#removeAll").show();
});