javascript - 删除结束标记后的文本 (Javascript)

Question

我正在尝试在结束后删除文本 </i>当用户不再将鼠标悬停在按钮上时标记。

我已经尝试了代码中的注释部分，也许它们可以让您了解我哪里出错了。

$('#deleteButton').on('mouseenter', function(event) {
  //$(this).find('i').html(' Delete Nest');
  $(this).find('i').after(' Delete Nest');
  //$(this).find('i').after(' <div>Delete Nest</div>');
}).on('mouseleave', function(event) {
  //$(this).find('i').html('');

  console.log($(this).find('i').after());

  //$(this).find('i').after('');
  //$(this).find('i').childNodes[1].textContent;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is the HTML of the button:

<button id="deleteButton" type="submit" name="_method" value="DELETE" class="btn btn-sm btn-danger muted muted-hover"><i class="fas fa-trash-alt"></i></button>

不应添加任何内容，而应从 #deleteButton 按钮中删除“删除嵌套”部分。

Answer 1

如果您可以将添加的文本包装在 span 中，则可以通过将其定位为相对于 i 的 next 元素来删除添加的文本> 元素:

$('#deleteButton').on('mouseenter', function(event) {
  $(this).find('i').after('<span>Delete Nest</span>');
}).on('mouseleave', function(event) {
  $(this).find('i').next().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is the HTML of the button:

<button id="deleteButton" type="submit" name="_method" value="DELETE" class="btn btn-sm btn-danger muted muted-hover"><i class="fas fa-trash-alt"></i></button>