Javascript 如何在jquery上分离元素？

如果我有这样的代码

<div class="size">
       <a class="cm active" data-id="cm">CM</a> /* ACTIVE */
       <a class="inch" data-id="inch">INCH</a>
</div>
<div class="button">
       <li data-head-cm="ABC" data-head-inch="DEF"
          data-body-cm="GHI" data-body-inch="JKL"
          class="active">                       /* ACTIVE */
               BUTTON 1
       </li>
       <li data-foot-cm="MNO" data-foot-inch="PQR"
          data-hair-cm="STU" data-hair-inch="VWX">
               BUTTON 2
       </li>
       <li data-head-cm="ABC" data-head-inch="DEF"
          data-body-cm="GHI" data-body-inch="JKL"
          data-hair-cm="STU" data-hair-inch="VWX">
               BUTTON 3
       </li>
</div>
<ul class="diagram">
</ul>

当我点击

尺寸时

。然后替换以

-inch

结尾的数据元素的值。取决于激活的元素

/* if click BUTTON 2 AND SIZE ACTIVED CLASS INCH, diagram ul. Create element <li> */
<ul class="diagram">
       <li id="foot">PQR</li>
       <li id="hair">VWX</li>
</ul>

/*如果单击按钮2并调整激活等级英寸，则显示ul图。创建元素
*/

PQR
VWX

我就是这样工作的。怎么会是这样？

更新的小提琴：

$（文档）。在（'click'，'button li'，函数（e）{
$（'.button li'）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“ul.diagram”）.html（“”）；
var sizeVal=$（“.size a.active”）.data（'id'）；
var ulHtml=“”；
var dataAttrs=$（this.data（）；
用于（数据属性中的x）{
var attrDetail=x.toLowerCase（）.split（sizeVal）；
如果（attrDetail.length>1）{
ulHtml+='
'+dataAttrs[x]+'
'；
}
}
$（“ul.diagram”）.html（ulHtml）；
});

是否可以更换车身部件？因为有40个身体部位。（头发头身体脚）。创建最小值

/* if click BUTTON 2 AND SIZE ACTIVED CLASS INCH, diagram ul. Create element <li> */
<ul class="diagram">
       <li id="foot">PQR</li>
       <li id="hair">VWX</li>
</ul>

$(document).on('click', '.button li', function(e) {
    $('.button li').removeClass("active");
    $(this).addClass("active");

    $("ul.diagram").html('');
    var sizeVal = $(".size a.active").data('id');

    var ulHtml = "";

    var dataAttrs = $(this).data();

    for(x in dataAttrs) {
      var attrDetail = x.toLowerCase().split(sizeVal);
      if(attrDetail.length > 1) {
        ulHtml += '<li id="'+attrDetail[0]+'">'+dataAttrs[x]+'</li>';
      }
    }
    $("ul.diagram").html(ulHtml);
});