添加的子项将添加到父项，但删除了ajax请求后

Question

我创建了一个网站，给艺术家提供艺术家的相关艺术家。如果我要求将相关艺术家从迈克尔·杰克逊（在我的示例中）中获取到Spotify API，则数据将返回并填充树。

我已经调试了我的代码，谷歌Chrome浏览器，我看到艺术家被添加到for循环后的部分。

但问题是现在，当我停止调试（ F8 ）时，一切都被清除了！

编辑：我还尝试过其他艺术家和一些工作，其他人则没有。一旦尝试了艺术家，代码就不再适用了......

问题是什么？在这里，我有JSFiddle。

function init() {
    $('body').on("click", ".artist-node", function() {
        var id = $(this).find("input").val();
        var rijnr = $(this).data("rij");

        $.ajax({
            url: "https://api.spotify.com/v1/artists/" + id + "/related-artists",
            success: function(data) {
                var aantal = data.artists.length;

                var rij = $('<div class="boom-rij" data-rij="2"></div>');
                $(".draw-area").append(rij);

                for (var i = 0; i < aantal; i++) {
                    vulNodesAan(data.artists[i], 2, rij);   
                }
            }
        });
    });
}

function vulNodesAan(data, rijnr, rij) {

    var imgData = geefImage(data.images);
    $(rij).append('<div class="artist-node"><input type="hidden" value="' + data.id + '"/><div class="artist-foto-container"><img src="' + imgData.url + '" alt="" /></div><p>' + data.name + '</p></div>');
}

很抱歉，但有些代码是用荷兰语写的。