スワイプで削除(リスト)

<div class="d11-03-08-phone">
          <div class="d11-03-08-screen">
            <div class="d11-03-08-content">受信トレイ</div>
            <div class="d11-03-08-list" id="d11-03-08-list">
              <div class="d11-03-08-item"><div class="d11-03-08-del">削除</div><div class="d11-03-08-fg">メッセージ 1</div></div>
              <div class="d11-03-08-item"><div class="d11-03-08-del">削除</div><div class="d11-03-08-fg">メッセージ 2</div></div>
              <div class="d11-03-08-item"><div class="d11-03-08-del">削除</div><div class="d11-03-08-fg">メッセージ 3</div></div>
            </div>
          </div>
        </div>

.d11-03-08-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-08-screen{position:absolute;inset:0;background:#f8fafc}
        .d11-03-08-content{position:absolute;top:14px;left:0;right:0;text-align:center;color:#94a3b8;font-size:13px;font-weight:600}
        .d11-03-08-list{position:absolute;top:44px;left:10px;right:10px}
        .d11-03-08-item{position:relative;height:40px;margin-bottom:8px;border-radius:10px;overflow:hidden;background:#ef4444}
        .d11-03-08-del{position:absolute;top:0;right:0;bottom:0;width:64px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
        .d11-03-08-fg{position:absolute;inset:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#334155;transition:transform .28s;touch-action:pan-y;user-select:none}
        .d11-03-08-fg.d11-03-08-open{transform:translateX(-64px)}

(function(){
        var root=document.getElementById('item-11-03-08');if(!root)return;
        root.querySelectorAll('.d11-03-08-item').forEach(function(it){
          var fg=it.querySelector('.d11-03-08-fg'),del=it.querySelector('.d11-03-08-del');
          var sx=0,dx=0,drag=false;
          fg.addEventListener('pointerdown',function(e){drag=true;sx=e.clientX;fg.style.transition='none';fg.setPointerCapture(e.pointerId);});
          fg.addEventListener('pointermove',function(e){if(!drag)return;dx=Math.max(-64,Math.min(0,e.clientX-sx-(fg.classList.contains('d11-03-08-open')?64:0)));fg.style.transform='translateX('+dx+'px)';});
          fg.addEventListener('pointerup',function(){if(!drag)return;drag=false;fg.style.transition='';fg.style.transform='';fg.classList.toggle('d11-03-08-open',dx<-30);dx=0;});
          del.addEventListener('click',function(){it.style.transition='opacity .25s,height .25s,margin .25s';it.style.opacity='0';it.style.height='0';it.style.margin='0';});
        });
      })();