絞り込みタグの動的追加・削除

<div class="d10-13-08-panel">
          <div class="d10-13-08-active"></div>
          <div class="d10-13-08-candidates">
            <button class="d10-13-08-chip" data-label="駅近" type="button">駅近</button>
            <button class="d10-13-08-chip" data-label="新築" type="button">新築</button>
            <button class="d10-13-08-chip" data-label="ペット可" type="button">ペット可</button>
            <button class="d10-13-08-chip" data-label="バス・トイレ別" type="button">バス・トイレ別</button>
          </div>
        </div>

.d10-13-08{padding:16px}
        .d10-13-08-panel{width:100%;max-width:280px}
        .d10-13-08-active{min-height:26px;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
        .d10-13-08-active-tag{display:inline-flex;align-items:center;gap:6px;background:#2f7fef;color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;border:none;cursor:pointer;animation:d1438in .25s ease}
        @keyframes d1438in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
        .d10-13-08-x{font-size:12px;line-height:1}
        .d10-13-08-candidates{display:flex;flex-wrap:wrap;gap:6px}
        .d10-13-08-chip{border:1px solid #dde3e8;background:#fff;color:#445;font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;cursor:pointer;transition:background .15s}
        .d10-13-08-chip:hover{background:#f2f6f9}
        .d10-13-08-chip.is-hidden{display:none}

(function(){
        var root=document.getElementById('item-10-13-08');if(!root)return;
        var activeRow=root.querySelector('.d10-13-08-active');
        var chips=root.querySelectorAll('.d10-13-08-chip');
        chips.forEach(function(chip){
          chip.addEventListener('click',function(){
            chip.classList.add('is-hidden');
            var tag=document.createElement('button');
            tag.type='button';
            tag.className='d10-13-08-active-tag';
            var textSpan=document.createTextNode(chip.getAttribute('data-label')+' ');
            var xSpan=document.createElement('span');
            xSpan.className='d10-13-08-x';
            xSpan.textContent='×';
            tag.appendChild(textSpan);
            tag.appendChild(xSpan);
            tag.addEventListener('click',function(){
              tag.remove();
              chip.classList.remove('is-hidden');
            });
            activeRow.appendChild(tag);
          });
        });
      })();