添加和/或删除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>