jQuery + JSON - 在追加之前清除数据

Question

我在根据匹配的数据属性附加新集之前尝试清除数据时遇到问题。它是这样的：

点击按钮＆gt;如果按钮的数据属性与JSON字段匹配，请使用这些项填充菜单

它到目前为止工作，但我正在使用append函数，它只是不断添加 - HTML选项似乎不起作用，我尝试使用.HTML（''）之前清除div的内容附加功能，它没有用。我很愚蠢，所以如果知道他们正在做什么的人尝试相同的路线，它可能会有效。

这是JSON文件：https://api.myjson.com/bins/non2t.json

这是代码：

$.getJSON("https://api.myjson.com/bins/non2t.json", function(data) {
    console.log(data);
  $.each(data,function(i,data){
    $('.main-btn').on("click", function () {
      var scale = $(this).data('scale')
    if (scale == data.root) {
$('#total-scale-men').append('<button>' + data.scale + '</button>');    }
    })
            });
});

$('.scales-men').show();

.scales-men {z-index:1000; position:absolute; top:12%; left:1px; height:calc(88% - 2px); width:calc(100% - 2px); border-radius:20px; background:rgba(255,255,255,.8); overflow:scroll; text-align:center; display:none;}
.scales-men div {padding:5px 0;}
/* 
https://api.myjson.com/bins/non2t.json
*/

#gcWindow {width:100%;height:382px;margin:0;padding:0;}

#gcWrap {position:absolute;left:calc(50% - (781px / 2));font-family:Lato;font-size:20px;}
#gcFretboard {border:1px #666 solid; border-radius:20px; width:781px; height:380px; margin-left:auto;margin-right:auto; background-image:url('https://www.electricherald.com/chordindex/img/bg.jpg'); background-position:0px 66px;background-size:contain;background-repeat:no-repeat;}

#gcFretboard > div.gcSubMen > ul >li {margin:0;padding:0;}

button {display:inline-block; z-index:1000; margin:6px 0px 2px 4px; height:23px; line-height:16px; background:#fff; border:1px #666 solid; border-radius:4px; outline:none; cursor:pointer; box-shadow:1px 1px 1px #ccc; font-weight:bold;color:#666;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;}
button:hover {color:#c44c4c;border:1px #c44c4c solid;box-shadow:1px 1px 1px #888;}
button:active {box-shadow:1px 1px 1px #888 inset;}
button sup, button sub {font-size:70%;}
#gcFretboard > div.gcSubMen > ul > li > button {font-weight:normal;}
#gcFretboard > div.gcMen > ul > li > button {width:48px;}

.gcMen {z-index:500; width:100%; position:absolute; text-align:center; top:4px;}
.gcSubMen {z-index:500; position:absolute; background:rgba(255,255,255,.9); width:779px; border-radius:20px; top:35px;}
.chords-menu {margin:0;padding:0;}
.chords-subgroups {margin:4px 0 0 0;padding:0;border-top:1px #fafafa dashed;}

.chords-menu li {
    display: inline-block;
  }
.chords-subgroups li {
    display: inline-block;
  }

#inf {width:781px; position:absolute; bottom:0px;}
#gcInfTit {position:absolute; width:781px; height:10px; bottom:34px;}
#gcInfTit div {float:left;text-align:left;font-size:10px;line-height:10px;padding-left:10px;margin:0;color:#ccc;}
#tit1 {width:calc(33% - 10px);} 
#tit2 {width:calc(33% - 10px);} 
#tit3 {width:calc(33% - 10px);}
.gcNAI {float:left; height:30px; color:#c44c4c;text-align:center;font-size:14px;font-weight:bold;}


.gcbg {background-size:contain; background-repeat:no-repeat;}
.gc-string {position:absolute; width:781px; height:16px;}
#gc-string-E {top:189px;
-moz-transform: rotate(.6deg);
-webkit-transform: rotate(.6deg);
-o-transform: rotate(.6deg);
-ms-transform: rotate(.6deg);
transform: rotate(.6deg);
}
#gc-string-A {top:171px;
-moz-transform: rotate(.28deg);
-webkit-transform: rotate(.28deg);
-o-transform: rotate(.28deg);
-ms-transform: rotate(.28deg);
  transform: rotate(.28deg);}
#gc-string-D {top:153px;
-moz-transform: rotate(-.02deg);
-webkit-transform: rotate(-.02deg);
-o-transform: rotate(-.02deg);
-ms-transform: rotate(-.02deg);
  transform: rotate(-.02deg);}
#gc-string-G {top:136px;
-moz-transform: rotate(-.25deg);
-webkit-transform: rotate(-.25deg);
-o-transform: rotate(-.25deg);
-ms-transform: rotate(-.25deg);
  transform: rotate(-.25deg);}
#gc-string-B {top:119px;
-moz-transform: rotate(-.55deg);
-webkit-transform: rotate(-.55deg);
-o-transform: rotate(-.55deg);
-ms-transform: rotate(-.55deg);
  transform: rotate(-.55deg);}
#gc-string-E2 {top:101px;
-moz-transform: rotate(-.95deg);
-webkit-transform: rotate(-.95deg);
-o-transform: rotate(-.95deg);
-ms-transform: rotate(-.95deg);
  transform: rotate(-.95deg);}

.fret-0 {left:0;}
.fret-1 {left:42px;}
.fret-2 {left:119px;}
.fret-3 {left:190px;}
.fret-4 {left:257px;}
.fret-5 {left:321px;}
.fret-6 {left:378px;}
.fret-7 {left:434px;}
.fret-8 {left:486px;}
.fret-9 {left:536px;}
.fret-10 {left:582px;}
.fret-11 {left:627px;}
.fret-12 {left:669px;}
.fret-13 {left:710px;}
.fret-14 {left:747px;}

.X {background-image:url('https://www.electricherald.com/chordindex/img/X.png');}
.A {background-image:url('https://www.electricherald.com/chordindex/img/A.png');}
.As {background-image:url('https://www.electricherald.com/chordindex/img/As.png');}
.B {background-image:url('https://www.electricherald.com/chordindex/img/B.png');}
.C {background-image:url('https://www.electricherald.com/chordindex/img/C.png');}
.Cs {background-image:url('https://www.electricherald.com/chordindex/img/Cs.png');}
.D {background-image:url('https://www.electricherald.com/chordindex/img/D.png');}
.Ds {background-image:url('https://www.electricherald.com/chordindex/img/Ds.png');}
.E {background-image:url('https://www.electricherald.com/chordindex/img/E.png');}
.F {background-image:url('https://www.electricherald.com/chordindex/img/F.png');}
.Fs {background-image:url('https://www.electricherald.com/chordindex/img/Fs.png');}
.G {background-image:url('https://www.electricherald.com/chordindex/img/G.png');}
.Gs {background-image:url('https://www.electricherald.com/chordindex/img/Gs.png');}

.nt {position:absolute; height:16px; width:16px; z-index:1000; background-size:contain;background-repeat:no-repeat;}
.inv {opacity:1;}
.gcop {opacity:1;}
.trans {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#gc-cw {font-family:lato; position:absolute; top:0; left:20px; font-size:10px;}
#gc-cw a {text-decoration:none; color:#000; display:block; margin-top:8px; width:100%;text-align:center;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;}
#gc-cw a:hover {outline:10px #fff solid;color:#c44c4c;}
#gc-cw a:active {outline:1px #f00 solid;}
#gc-cw a span {font-weight:bold;font-size:11px;line-height:11px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gcWindow">
<div id="gcWrap">
  <div id="men-A" class="scales-men"><div></div></div>
  <div id="total-scale-men" class="scales-men"></div>
  <div id="gcFretboard">
  <div class="gcMen">
  <ul class="chords-menu">
  <li><button data-scale="A" class="main-btn">A</button></li>
  <li><button data-scale="A#/Bb" class="main-btn">A#</button></li>
  <li><button data-scale="B" class="main-btn">B</button></li>
  <li><button data-scale="C" class="main-btn">C</button></li>
  <li><button data-scale="C#/Db" class="main-btn">C#</button></li>
  <li><button data-scale="D" class="main-btn">D</button></li>
  <li><button data-scale="D#/Eb" class="main-btn">D#</button></li>
  <li><button data-scale="E" class="main-btn">E</button></li>
  <li><button data-scale="F" class="main-btn">F</button></li>
  <li><button data-scale="F#/Gb" class="main-btn">F#</button></li>
  <li><button data-scale="G" class="main-btn">G</button></li>
  <li><button data-scale="G#/Ab" class="main-btn">G#</button></li>
</ul></div>
<div class="gcSubMen">
  <ul class="chords-subgroups">
</ul>
    </div>

    <div id="gc-string-E" class="gc-string">
      <div class="nt inv fret-0 E"></div>
      <div class="nt inv fret-1 F"></div>
      <div class="nt inv fret-2 Fs"></div>
      <div class="nt inv fret-3 G"></div>
      <div class="nt inv fret-4 Gs"></div>
      <div class="nt inv fret-5 A"></div>
      <div class="nt inv fret-6 As"></div>
      <div class="nt inv fret-7 B"></div>
      <div class="nt inv fret-8 C"></div>
      <div class="nt inv fret-9 Cs"></div>
      <div class="nt inv fret-10 D"></div>
      <div class="nt inv fret-11 Ds"></div>
      <div class="nt inv fret-12 E"></div>
      <div class="nt inv fret-13 F"></div>
      <div class="nt inv fret-14 Fs"></div>
    </div>
    <div id="gc-string-A" class="gc-string">
      <div class="nt inv fret-0 A"></div>
      <div class="nt inv fret-1 As"></div>
      <div class="nt inv fret-2 B"></div>
      <div class="nt inv fret-3 C"></div>
      <div class="nt inv fret-4 Cs"></div>
      <div class="nt inv fret-5 D"></div>
      <div class="nt inv fret-6 Ds"></div>
      <div class="nt inv fret-7 E"></div>
      <div class="nt inv fret-8 F"></div>
      <div class="nt inv fret-9 Fs"></div>
      <div class="nt inv fret-10 G"></div>
      <div class="nt inv fret-11 Gs"></div>
      <div class="nt inv fret-12 A"></div>
      <div class="nt inv fret-13 As"></div>
      <div class="nt inv fret-14 B"></div>
    </div>
    <div id="gc-string-D" class="gc-string">
      <div class="nt inv fret-0 D"></div>
      <div class="nt inv fret-1 Ds"></div>
      <div class="nt inv fret-2 E"></div>
      <div class="nt inv fret-3 F"></div>
      <div class="nt inv fret-4 Fs"></div>
      <div class="nt inv fret-5 G"></div>
      <div class="nt inv fret-6 Gs"></div>
      <div class="nt inv fret-7 A"></div>
      <div class="nt inv fret-8 As"></div>
      <div class="nt inv fret-9 B"></div>
      <div class="nt inv fret-10 C"></div>
      <div class="nt inv fret-11 Cs"></div>
      <div class="nt inv fret-12 D"></div>
      <div class="nt inv fret-13 Ds"></div>
      <div class="nt inv fret-14 E"></div>
    </div>
    <div id="gc-string-G" class="gc-string">
      <div class="nt inv fret-0 G"></div>
      <div class="nt inv fret-1 Gs"></div>
      <div class="nt inv fret-2 A"></div>
      <div class="nt inv fret-3 As"></div>
      <div class="nt inv fret-4 B"></div>
      <div class="nt inv fret-5 C"></div>
      <div class="nt inv fret-6 Cs"></div>
      <div class="nt inv fret-7 D"></div>
      <div class="nt inv fret-8 Ds"></div>
      <div class="nt inv fret-9 E"></div>
      <div class="nt inv fret-10 F"></div>
      <div class="nt inv fret-11 Fs"></div>
      <div class="nt inv fret-12 G"></div>
      <div class="nt inv fret-13 Gs"></div>
      <div class="nt inv fret-14 A"></div>
    </div>
    <div id="gc-string-B" class="gc-string">
      <div class="nt inv fret-0 B"></div>
      <div class="nt inv fret-1 C"></div>
      <div class="nt inv fret-2 Cs"></div>
      <div class="nt inv fret-3 D"></div>
      <div class="nt inv fret-4 Ds"></div>
      <div class="nt inv fret-5 E"></div>
      <div class="nt inv fret-6 F"></div>
      <div class="nt inv fret-7 Fs"></div>
      <div class="nt inv fret-8 G"></div>
      <div class="nt inv fret-9 Gs"></div>
      <div class="nt inv fret-10 A"></div>
      <div class="nt inv fret-11 As"></div>
      <div class="nt inv fret-12 B"></div>
      <div class="nt inv fret-13 C"></div>
      <div class="nt inv fret-14 Cs"></div>
    </div>
    <div id="gc-string-E2" class="gc-string">
      <div class="nt inv fret-0 E"></div>
      <div class="nt inv fret-1 F"></div>
      <div class="nt inv fret-2 Fs"></div>
      <div class="nt inv fret-3 G"></div>
      <div class="nt inv fret-4 Gs"></div>
      <div class="nt inv fret-5 A"></div>
      <div class="nt inv fret-6 As"></div>
      <div class="nt inv fret-7 B"></div>
      <div class="nt inv fret-8 C"></div>
      <div class="nt inv fret-9 Cs"></div>
      <div class="nt inv fret-10 D"></div>
      <div class="nt inv fret-11 Ds"></div>
      <div class="nt inv fret-12 E"></div>
      <div class="nt inv fret-13 F"></div>
      <div class="nt inv fret-14 Fs"></div>
</div>
    
<div class="chord">
  <div id='gcInfTit'><div id="tit1">ROOT</div><div id="tit2">SCALE</div><div id="tit3">STRUCTURE</div></div>
  <div id="inf"></div>
</div>
  </div>
  
</div> <!---gcWrap--->
</div> <!---gcWindow--->

对于所有格式设置感到抱歉，在codepen中可能更容易看到：http://codepen.io/JTBennett/pen/NdLWJy

无论如何，最终的想法是根据JSON文件中的信息显示比例，以隐藏/显示正确的音符组。

非常感谢任何帮助！

Answer 1

之后

 $('.main-btn').on("click", function () {

添加此

$('#total-scale-men').empty();

Answer 2

也许？

A。）

Seq(t1,t2)

<强> B中。）

jQuery('.sample div').html('');