ajax请求返回数据时点击隐藏内容

当你点击按钮的时候显示一个内容，点击按钮的时候隐藏内容，然后点击按钮的时候显示重复，不知如何解决这个问题？后来网友帮我解决好了一个问题，我十分感谢他。

HTML文件：

<button id="liuyan" type="button" class="btn btn-primary btn-lg">my click</button><div id="mydiv2">

JavaScript 文件：

   $("button#liuyan").on("click", function(e) {

        e.preventDefault();

        $.ajax({
            url: 'http://localhost:3000/api/comment',
            method: 'GET',
            dataType: "jsonp",
            async: false, 
        }).done(function(data, textStatus, jqXHR) {

            var mydiv2 = $("#mydiv2");

            if (mydiv2.css("display") === "none") {
                mydiv2.show();
                var mycode = document.createElement('div');
                mycode.innerHTML = '<pre><code data-language="json">' + JSON.stringify(data, undefined, 2) + '</code></pre>';
                Rainbow.color(mycode, function() {
                    document.getElementById('mydiv2').appendChild(mycode)
                });
            } else {
                mydiv2.hide();

            }

            console.log(data);
            console.log(jqXHR.responseText);
        });

    });

我在stackoverflow网站提问一个难题，不到几分钟网友帮我解决好了。

网友说：“我没有AJAX网址。我给了虚拟数据。它应该工作。 每一次，当显示你附加内容与现有的内容。所以它会重复。所以你必须删除div中现有的内容，并将其附加到div。”

追加之前添加此行：

document.getElementById('mydiv2').innerHTML = '';

然后现有的内容将被清除:

$("button#liuyan").on("click", function(e) {

        e.preventDefault();

           data = {
           "name":"hello"
           }

            var mydiv2 = $("#mydiv2");

            if (mydiv2.css("display") === "none") {
                mydiv2.show();
                var mycode = document.createElement('div');
                mycode.innerHTML = '<pre><code data-language="json">' + JSON.stringify(data, undefined, 2) + '</code></pre>';
                //Rainbow.color(mycode, function() {
                 document.getElementById('mydiv2').innerHTML = '';    
                 document.getElementById('mydiv2').appendChild(mycode)
                //});
            } else {
                mydiv2.hide();

            }

         //   console.log(data);
        //    console.log(jqXHR.responseText);
       // });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="liuyan">Click</button>
<div id="mydiv2"></div>

其他方式： 可以请求返回响应功能，并单击按钮时显示和隐藏