javascript - jquery - 删除不工作的 sibling

Question

我正在尝试在 font-awesome 元素之间切换。

我想在单击新的 a 标签时删除 font-awesome 元素。 font-awesome 元素应该只对当前点击的 a 标签可见。

[ fiddle ][1]

我的 JS 代码。

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

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