Verwijderen met ongedaan maken New

A row is struck through and folds away, then a toast with a countdown ring gives five seconds to restore it. For calendars, carts and admin screens.

Afspraken deze week3

14oktOpname badkamer09:00 · Kerklaan 12, Rijswijk
15oktLevering tegels13:30 · Laan van Nieuw Oost-Indie 4, Den Haag
17oktOplevering keuken10:00 · Prinsegracht 31, Delft

Afspraak verwijderd

How to use it

Paste the HTML where the buttons should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More buttons

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →