添加和/或刪除li在同一個按鈕上點擊jquery

Question

我有一組按鈕，都有類'.skills'。當我點擊一個按鈕時，我想切換類'btn-clicked'並將按鈕文本添加到ul中的li。我有工作。當我再次點擊按鈕時，我想刪除'btn-clicked'類（該類切換成功），並從ul中刪除li。我有下面的代碼添加'btn-clicked'類，並在第一次點擊時將ul添加到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);正在導致您的問題。我重寫了你的代碼以規避這一點。 而不是找到具體<li>與html()，您應該使用選擇器。

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