Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html><html><head><style>li{padding:8px 12px;background:#ede9fe;margin:4px 0;border-radius:4px;cursor:pointer;list-style:none}li:hover{background:#c7d2fe}</style></head><body style="padding:20px;font-family:Arial"><h3>Click items to delete</h3><ul id="l"></ul><input id="i" placeholder="New item..." style="padding:8px;width:180px"><button onclick="add()" style="padding:8px 12px;background:#6366f1;color:white;border:none;border-radius:4px;margin-left:6px;cursor:pointer">Add</button><script>["HTML","CSS","JS"].forEach(t=>{const li=document.createElement("li");li.textContent=t+" (click to remove)";li.onclick=()=>li.remove();document.getElementById("l").appendChild(li);});function add(){const v=document.getElementById("i").value.trim();if(!v)return;const li=document.createElement("li");li.textContent=v;li.onclick=()=>li.remove();document.getElementById("l").appendChild(li);document.getElementById("i").value="";}</script></body></html>
Result
Open