Javascript 在jQuery中，第一次单击时追加片段，第二次单击时删除片段

这就是我要做的，我有一个按钮，我想在第一次点击时添加一个外部HTML片段。然后，当第二次单击相同的按钮时，删除相同的片段。我对jQuery非常陌生，所以在这方面遇到了麻烦

您可以在这里查看完整的代码：，但这是我到目前为止的jQuery代码。我知道我走错了方向，但我不知道如何解决它

$.get("fragment.html", function(data) {
    $('.js-load__button').click(function(){
        $('#js-load').append(data);
        $('.js-load__button').addClass("js-load__remove");
        $('.js-load__button').attr("disabled", true);
    });
    $('.js-load__remove').click(function(){
        $(data).remove();
        $('.js-load__button').attr("disabled", false);
    });
});

---

那代码有点乱。如果你把事情组织得稍有不同，它就会变得非常简单

首先。更简化的HTML：

<ul id="list">
    <li>
        <figure>
            <img src="http://placekitten.com/300/200"/>
            <figcaption>I Can Haz Kitty?</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://placekitten.com/300/200"/>
            <figcaption>I Can Haz Kitty?</figcaption>
        </figure>
    </li>
</ul>
<button>LOAD MORE</button>

我能和基蒂说话吗？


我能和基蒂说话吗？


加载更多

下面是随附的脚本：

var list = document.getElementById('list');
var htmlFragment = '<li class="more"><figure><img src=\"http://placekitten.com/300/200\"/><figcaption>I Can Haz Kitty?</figcaption></figure></li>';

$('button').click(function(evt) {
    evt.preventDefault();

    var more = $(list).find('li.more');

    if (more.length > 0) {
        more.each(function() { $(this).remove(); });
    } else {
        $(htmlFragment).appendTo($(list));
    }
});

var list=document.getElementById（'list'）；
var htmlFragment='
我可以和Kitty一起玩吗？
；
$（“按钮”）。单击（函数（evt）{
evt.preventDefault（）；
var more=$（list.find（'li.more'）；
如果（更多长度>0）{
more.each（函数（）{$（this.remove（）；}）；
}否则{
$（htmlFragment）.appendTo（$（列表））；
}
});

因为我没有访问您的AJAX调用的权限，所以我假设某种HTML字符串作为“htmlFragment”返回

---

我用叉子叉起了你的小提琴，并在这里进行了更新：

试试jQuery切换事件，太棒了，谢谢！谢谢你简化它。