← 動的パーツギャラリーへ戻る

パーツ番号 11-05-02 ・ JavaScript使用

フィルタチップ行(選択中の条件)

現在選択中の絞り込み条件をチップで一覧表示し、×クリックで個別に解除できるUI。WordPressの商品一覧ページの条件確認に便利です。

clickjs

プレビュー

ソースコード

HTML

<div class="d11-05-02-wrap">
          <div class="d11-05-02-chips" id="d482Chips">
            <span class="d11-05-02-chip">価格: &yen;1,000-&yen;3,000<button type="button" aria-label="解除">&times;</button></span>
            <span class="d11-05-02-chip">カテゴリ: 家具<button type="button" aria-label="解除">&times;</button></span>
            <span class="d11-05-02-chip">在庫あり<button type="button" aria-label="解除">&times;</button></span>
          </div>
          <p class="d11-05-02-empty">絞り込み条件はありません</p>
        </div>

CSS

.prev.d11-05-02{align-items:flex-start;justify-content:flex-start}
        .d11-05-02-wrap{width:100%}
        .d11-05-02-chips{display:flex;flex-wrap:wrap;gap:8px}
        .d11-05-02-chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:#4338ca;font-size:12px;font-weight:600;padding:6px 8px 6px 12px;border-radius:99px}
        .d11-05-02-chip button{border:0;background:#c7d2fe;color:#3730a3;width:16px;height:16px;border-radius:50%;font-size:11px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}
        .d11-05-02-chip button:hover{background:#a5b4fc}
        .d11-05-02-empty{display:none;font-size:12.5px;color:#9ca3af;margin:0}
        .d11-05-02-empty.show{display:block}

JavaScript

(function(){
        var root=document.getElementById('item-11-05-02');
        var chips=root.querySelector('.d11-05-02-chips');
        var empty=root.querySelector('.d11-05-02-empty');
        chips.addEventListener('click',function(e){
          var btn=e.target.closest('button');
          if(!btn)return;
          var chip=btn.closest('.d11-05-02-chip');
          if(chip)chip.remove();
          if(!chips.querySelector('.d11-05-02-chip'))empty.classList.add('show');
        });
      })();

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