Question

我有一个将运行ajax进程的按钮。但是首先我添加了一个微调器图标并禁用了它，以便在ajax未完成时不会多次单击该按钮。

我成功添加了带有以下代码的图标：

$('#button1').append('<i class="fa fa-spinner fa-spin"></i>');

，在进行了一段时间的搜索之后，我发现我需要使用.remove()来删除带有jquery的元素。那么为什么此代码不删除图标？

$('#button1').remove('.fa');

$('button').click(function() {
	alert('asd');
  $(this).remove('.fa');
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">
  submit
  <i class="fa fa-spinner"></i>
</button>

Answer 1

您快到了。 $(this)代表一个按钮。您需要在class之前的按钮内找到remove()。

$('button').click(function() {
  $(this).find('.fa').remove();
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">
  submit
  <i class="fa fa-spinner"></i>
</button>

Answer 2

可以这样做。您必须先访问孩子，然后再删除它

$('button').click(function() {
	alert('asd');
  $(this).children(".fa").remove();
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button">
  submit
  <i class="fa">asd</i>
</button>

如何删除按钮内的标签，

2 个答案: