How to remove tag inside button,

Question

I have a button that will run an ajax process. but first I add a spinner icon and disable it so that the button won't be clicked multiple times while the ajax is not completed.

I succeeded in adding the icon with this code:

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

and after googling for a little, I found out that I need to use .remove() to remove an element with jquery. then why won't this code remove the icon?

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

_“then why won't this code remove the icon?”_ - because you are using `.remove` wrong. You don’t call this on an element you want to remove stuff from, you call it on the collection of elements you actually want to remove. Right now, you are trying to remove the element `#button1`, but only under the limiting condition, that _it_ also has the class `fa` - which it doesn’t, so nothing happens. — 04FS, Nov 27 '19 at 08:47
I wonder.. why the downvote? is it because the question is too stupid? — dapidmini, Nov 27 '19 at 08:52
There's nothing wrong with the question; it shows a misunderstanding of how jquery works, but that's ok, because that's why you're asking the question. Should have had the code in the question, not a jsfiddle link, but it wasn't a "work-around" link so acceptable by the system and the code provided was adequate to both demonstrate and identify the problem **Some people seem to downvote just because they don't "*like*" a question.** Have an upvote to compensate. — freedomn-m, Nov 27 '19 at 09:05

score 3 · Accepted Answer · answered Nov 27 '19 at 08:47

3

You are almost there. $(this) represent a button. Yo need to find class inside button before 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>

answered Nov 27 '19 at 08:47

4b0

21,981
30
95
142

just out of curiosity.. which is faster: `find` or `children`? – dapidmini Nov 27 '19 at 09:09
1

Taken at face value, `children()` will only look at direct ancestors while `.find()` will look at all ancestors. So, in theory, children() should be faster. But that's not always how it works and will depend on the selector. It'll also be a micro-optimisation that you probably don't need (or if you do then you need to look at a completely different alternative) – freedomn-m Nov 27 '19 at 09:10
https://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery – Rory McCrossan Nov 27 '19 at 09:10

Ahmed Ali · Answer 2 · 2019-11-27T09:02:32.143

This can be done like this. You have to access the children before removing it

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

How to remove tag inside button,

2 Answers2