CODEWITHSUNDEEP
javascript
Louis D.
Louis D.

Reputation: 21

Removing text after a closing tag (Javascript)

I'm trying to remove text after a closing </i> tag when the user doesn't hover over the button any more.

I've tried the commented parts in the code maybe they can give you an idea of where I'm going wrong.

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

Instead of adding nothing it should remove the "Delete Nest" part from the #deleteButton button.

Upvotes: 0

Views: 59

Answers (2)

antonku
antonku

Reputation: 7665

If you can wrap the added text in a span then it's possible to remove the added text by locating it as next element relatively to i element:

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

Upvotes: 1

Bojmaliev
Bojmaliev

Reputation: 61

Here is your solution:

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

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

  $(this).find('.btnText').remove();
  //$(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>

Upvotes: 0

Related Questions