Verwijderen met ongedaan maken Nieuw

<!-- Verwijderen met ongedaan maken · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dun"><div class="dun__card"><div class="dun__hd"><span>Afspraken deze week</span><span class="dun__cnt">3</span></div><ul class="dun__ul">
<li class="dun__li"><div class="dun__in"><span class="dun__dt"><b>14</b>okt</span><span class="dun__tx"><b>Opname badkamer</b><small>09:00 · Kerklaan 12, Rijswijk</small></span><button class="dun__del" type="button" aria-label="Verwijder afspraak Opname badkamer"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></button></div></li>
<li class="dun__li"><div class="dun__in"><span class="dun__dt"><b>15</b>okt</span><span class="dun__tx"><b>Levering tegels</b><small>13:30 · Laan van Nieuw Oost-Indie 4, Den Haag</small></span><button class="dun__del" type="button" aria-label="Verwijder afspraak Levering tegels"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></button></div></li>
<li class="dun__li"><div class="dun__in"><span class="dun__dt"><b>17</b>okt</span><span class="dun__tx"><b>Oplevering keuken</b><small>10:00 · Prinsegracht 31, Delft</small></span><button class="dun__del" type="button" aria-label="Verwijder afspraak Oplevering keuken"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></button></div></li></ul>
<div class="dun__tw"><div class="dun__toast" role="status"><svg class="dun__ring" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><circle cx="10" cy="10" r="8" pathLength="1"/></svg><span class="dun__tt">Afspraak verwijderd</span><button class="dun__undo" type="button">Ongedaan maken</button></div></div></div></div>
</div>

/* Verwijderen met ongedaan maken · NedDev · eigen werk. */
.dun{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;display:grid;place-items:center;padding:12px}
.dun__card{position:relative;width:min(330px,100%);background:#fff;border-radius:6px;padding:10px 12px 6px;overflow:hidden}
.dun__hd{display:flex;justify-content:space-between;align-items:center;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6762;padding-bottom:6px}
.dun__cnt{background:#0a0a0a;color:#fff;border-radius:999px;min-width:18px;text-align:center;padding:2px 5px;font-variant-numeric:tabular-nums}
.dun__ul{list-style:none;margin:0;padding:0}
.dun__li{display:grid;grid-template-rows:1fr;transition:grid-template-rows .38s cubic-bezier(.7,0,.2,1),opacity .3s}
.dun__li.is-gone{grid-template-rows:0fr;opacity:0}
.dun__in{min-height:0;overflow:hidden;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;border-top:1px solid #eeebe7;padding:6px 0}
.dun__dt{display:flex;flex-direction:column;align-items:center;font:500 8.5px 'JetBrains Mono',monospace;text-transform:uppercase;color:#6b6762;line-height:1.1}
.dun__dt b{font:800 15px 'Switzer',sans-serif;color:#0a0a0a}
.dun__tx{min-width:0;display:flex;flex-direction:column}
.dun__tx b{font-size:12.5px;font-weight:700;align-self:flex-start;background:linear-gradient(#F5480F,#F5480F) 0 58%/0% 1.5px no-repeat;transition:background-size .28s ease,color .28s}
.dun__li.is-del .dun__tx b{background-size:100% 1.5px;color:#9a958f}
.dun__tx small{font-size:10.5px;color:#6b6762;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dun__del{appearance:none;width:28px;height:28px;border:0;border-radius:4px;background:none;color:#6b6762;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.dun__del:hover{background:#fff1eb;color:#c43a0b}.dun__del:focus-visible{outline:2px solid #F5480F}
.dun__tw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.7,0,.2,1)}
.dun.is-toast .dun__tw{grid-template-rows:1fr}
.dun__toast{min-height:0;overflow:hidden;display:flex;align-items:center;gap:8px;background:#0a0a0a;color:#fff;border-radius:5px;padding:0 8px 0 10px;font-size:12px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .38s cubic-bezier(.3,1.3,.5,1),padding .38s}
.dun.is-toast .dun__toast{opacity:1;transform:none;padding:7px 8px 7px 10px;margin-top:6px}
.dun__ring{flex:none;transform:rotate(-90deg)}
.dun__ring circle{fill:none;stroke:#F5480F;stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:0}
.dun.is-toast .dun__ring circle{animation:dun-cd 5s linear forwards}
@keyframes dun-cd{to{stroke-dashoffset:1}}
.dun__tt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dun__undo{appearance:none;border:0;background:none;color:#F5480F;font:700 12px 'Switzer',sans-serif;cursor:pointer;padding:4px 6px;border-radius:3px;white-space:nowrap}
.dun__undo:hover{background:rgba(245,72,15,.15)}.dun__undo:focus-visible{outline:2px solid #F5480F}
@media (prefers-reduced-motion:reduce){.dun__li,.dun__tw,.dun__toast,.dun__tx b{transition:none}}

// Verwijderen met ongedaan maken · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.dun')||root;
var lis=[].slice.call(root.querySelectorAll('.dun__li')),cnt=root.querySelector('.dun__cnt'),tt=root.querySelector('.dun__tt'),undo=root.querySelector('.dun__undo');
var pend=null,touched=false,ring=root.querySelector('.dun__ring circle');
function count(){var c=lis.filter(function(l){return!l.classList.contains('is-gone');}).length;cnt.textContent=c;return c;}
function finalize(){if(!pend)return;clearTimeout(pend.t);pend.li.hidden=true;pend=null;root.classList.remove('is-toast');
if(count()===0)setTimeout(function(){lis.forEach(function(l){l.hidden=false;l.classList.remove('is-del');void l.offsetWidth;l.classList.remove('is-gone');});count();},1200);}
function del(li){if(li.classList.contains('is-del'))return;finalize();li.classList.add('is-del');
setTimeout(function(){li.classList.add('is-gone');count();},280);
tt.textContent=li.querySelector('.dun__tx b').textContent+' verwijderd';root.classList.remove('is-toast');void ring.getBoundingClientRect();root.classList.add('is-toast');
pend={li:li,t:setTimeout(finalize,5300)};}
function restore(){if(!pend)return;var li=pend.li;clearTimeout(pend.t);pend=null;root.classList.remove('is-toast');li.classList.remove('is-gone');count();setTimeout(function(){li.classList.remove('is-del');},300);}
lis.forEach(function(li){li.querySelector('.dun__del').addEventListener('click',function(){touched=true;del(li);});});
undo.addEventListener('click',function(){touched=true;restore();});
if(!matchMedia('(prefers-reduced-motion: reduce)').matches)(function loop(){setTimeout(function(){if(touched)return;del(lis[1]);setTimeout(function(){if(!touched)restore();},2600);loop();},pend?5200:900);})();
}
init(document.querySelector('.jouw-container'));