如何删除<button>里面的"auto-added span"？

Question

我在 <ul><li>...</ul></li>

里面有那个 <a> (Edit diagram + icons)

我想在 <a>

中添加点击able 和 hoverable 箭头图标

所以我用显示创建了按钮：内容，一些代码：

...
<li class="active">
   <a href="#"><span class="fa fas fa-edit mr-3"></span> Edit diagram
      <button onclick="location.href='/drawdiagram'" class="fas fa-reply mr-3" style="display: contents"> 
      </button>
   </a>
</li>
...

这是我的问题。看看那个屏幕：

在我的按钮标签中，添加了 <span>...这个跨度添加了一些 css，我的意思是一些填充等。结果在那张图片上 -.-
那个绿色的长方形让我讨厌。首先，它从底部向我的 <li> 添加边距。 其次也是最糟糕的是，它增加了额外的区域，我可以在其中移动鼠标并且我的箭头将悬停。

我的鼠标可以在那里，箭头会一直悬停-.-

额外的 <span> 是由 jQuery 添加的，但我不想在图书馆里翻找。

所以问题是，有人知道我可以用它做什么吗？ 我想删除 "somehow" 使用 JavaScript 的跨度或 jQuery 但我不知道该怎么做。或者我可以 "somehow" 使用 css 删除它。但是记住，我不想在图书馆里翻找。

Answer 1

有很多方法可以做到这一点。
但首先你必须确认如果你删除这个按钮内的<span>，你的图标不会受到干扰。对于测试，只需在检查元素的帮助下将其删除（希望你知道。怎么做）。
如果删除此 <span> 没问题，那么在 JQuery 的帮助下，您可以通过添加此行将其删除。
$(document).ready(function(){ $('#ID_of_button span').remove(); }

如何删除<button>里面的"auto-added span"？

How to delete "auto-added span" inside <button>?

html

javascript

css

jquery

jquery-ui