user2281858 user2281858 - 6 days ago 6
CSS Question

jquery - remove siblings not working

I am trying to toggle between

font-awesome
elements .

I want to remove the
font-awesome
element when a new
a
tag is clicked. The font-awesome element should be visible only for the current clicked
a
tag.

[FIDDLE][1]

My JS CODE.

$(document).ready(function() {
$('.nav ul li:first').append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$('.nav ul li a').click(function(event) {
event.preventDefault();
$(this).append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$(this).parent().siblings().removeClass('fa fa-chevron-right'); // not working
});

});

Answer

$(document).ready(function() {
  var fontAwesome = $('<i/>').addClass('fa fa-chevron-right');
  $('.nav ul li:first').append(fontAwesome);
  $('.nav ul li a').on('click', function(event) {
    event.preventDefault();
    $('.nav ul li a i.fa.fa-chevron-right').remove();
    $(this).append(fontAwesome);
  });
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="#section-features">Option A</a></li>
    <li><a href="#section-functions">Option B</a></li>
    <li><a href="#section-pecifications">Option C</a></li>
  </ul>
</div>

Comments