添加和/或删除 li 在同一个按钮上单击 jquery

Question

我有一组按钮，它们都具有“.skills”类。当我单击一个按钮时，我想切换“btn-clicked”类并将按钮文本添加到 ul 内的 li 中。我有这个工作。当我再次单击该按钮时，我想删除“btn-clicked”类（切换类成功）并从 ul 中删除 li。我有以下代码添加“btn-clicked”类并在第一次单击时将 li 添加到 ul，但在第二次单击时，它不会从 ul 中删除 li。

$(".skills").on("click", function() {

  var $this = $(this);
  var $ul = $('.previewSkillsRequired');
  var $btnText = $this.text();
  var $li = $('<li/>').html($btnText);

  $this.toggleClass('btn-clicked');

  if($this.hasClass('btn-clicked')) {
    $ul.append($li);
  } else {
    $ul.find($li).remove();
  }
});

Answer 1

var $li = $('<li/>').html($btnText); 引起了您的问题。我重写了你的代码来规避这个。 与其使用html() 查找特定的<li>，不如使用contains() 选择器。

$(".skills").on("click", function() {

  var $this = $(this);
  var $ul = $('.previewSkillsRequired');
  var $btnText = $this.text();

  $this.toggleClass('btn-clicked');

  if($this.hasClass('btn-clicked')) {
    $ul.append('<li>' + $btnText + '</li>');
  } else {
    $ul.find('li:contains(' + $btnText + ')').remove();
  }
  
});

.btn-clicked {
  background-color: #33ffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="skills">Button Text</button> <button class="skills">Other Button</button>
<br>
<ul class="previewSkillsRequired">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>