如何删除 <button> 内的“自动添加跨度”？

Question

我在<ul><li>...</ul></li> 里面有那个<a> (Edit diagram + icons)

我想在那个<a>中添加clickable和hoverable箭头图标

所以我创建了带有 display: contents 的按钮，一些代码：

...
<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 添加的，但我不想在库中翻找。

所以问题是，有人知道我可以用这个做什么吗？我有一个想法，使用 JavaScript 或 jQuery 删除“不知何故”，但我不知道该怎么做.或者也许我可以“以某种方式”使用 css 删除它。但请记住，我不想在图书馆里翻找。

Answer 1

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