<form onsubmit="AddItem();return false;">
  <p>To do list:</p>
  <p id=pEmpty>* The list is empty *</p>
  <ul id=TheList></ul>
  <p><input type=text id=TxtNew> <button type=submit>Add</button></p>
  <button type=button onclick="RemoveChecked()">Remove checked items</button>
</form>

let Items=[{title:"Wash car"},{title:"Buy groceries",done:true}];

function RenderTheList() {
  pEmpty.hidden=Items.length>0;
  TheList.innerHTML=Items.map((itm,idx)=>
     `<li>
       <input type=checkbox onclick="Items[${idx}].done=this.checked" ${itm.done?'checked':''}>
       ${itm.title}
       <button type=button onclick="RemoveItem(${idx})">Remove</button>
     </li>`).join('');
}

function AddItem() {
  let NewItem=TxtNew.value.trim();
  if(NewItem.length===0) return;
  Items.push({title:NewItem});
  RenderTheList();
  TxtNew.value='';
  TxtNew.focus();
}

function RemoveItem(idx) {
  Items.splice(idx,1);
  RenderTheList();
}

function RemoveChecked() {
  Items=Items.filter(itm=>!itm.done);
  RenderTheList();
}

RenderTheList();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.