パーツ番号 09-01-04 ・ JavaScript使用

ピルタグ群(削除可)

×付きのタグチップを横並びに表示。×をクリックするとそのタグが消えます。絞り込み条件や選択済みカテゴリのUIに使えます。

clickjs

プレビュー

ソースコード

HTML

<div class="d09-01-04-tags">
          <span class="d09-01-04-chip">デザイン<button type="button" aria-label="削除">&times;</button></span>
          <span class="d09-01-04-chip">WordPress<button type="button" aria-label="削除">&times;</button></span>
          <span class="d09-01-04-chip">SEO<button type="button" aria-label="削除">&times;</button></span>
          <span class="d09-01-04-chip">制作<button type="button" aria-label="削除">&times;</button></span>
        </div>

CSS

.d09-01-04-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
        .d09-01-04-chip{display:inline-flex;align-items:center;gap:6px;background:#e0e7ff;color:#3730a3;font-size:13px;font-weight:600;padding:6px 8px 6px 12px;border-radius:16px;transition:opacity .25s,transform .25s}
        .d09-01-04-chip.d09-01-04-out{opacity:0;transform:scale(.7)}
        .d09-01-04-chip button{border:none;background:#c7d2fe;color:#3730a3;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
        .d09-01-04-chip button:hover{background:#a5b4fc}

JavaScript

(function(){
        var root=document.getElementById('item-09-01-04');if(!root)return;
        root.querySelector('.d09-01-04-tags').addEventListener('click',function(e){
          var b=e.target.closest('button');if(!b)return;
          var chip=b.closest('.d09-01-04-chip');chip.classList.add('d09-01-04-out');
          setTimeout(function(){chip.remove();},260);
        });
      })();

クラス名 .d09-01-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。