javascript - 如何隐藏一个 anchor 标签并在同一个地方显示另一个 anchor 标签

Question

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

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

感谢任何输入。谢谢。

JSP

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

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

Javascript

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

Answer 1

Bootstrap 按钮最好在它们自己的元素中使用，尝试将它们包装在另一个元素中，然后由您的代码隐藏。

<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>