如何刪除按鈕內的標簽，

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)代表一個按鈕。 你需要在remove()之前找到按鈕內的class 。

 $('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>

Answer 3

<script>
 $( "button" ).click(function() {
  alert('try');
  $('elementid').remove();
 }
);
</script>