Clear completed task button To-do list – Blancer.com Tutorials and projects

I have tried to create a code that clear all completed task (completed task which is the items with a line-through on them) when the clear completed button is clicked. I will leave the function open as I’m open to new ideas and you should run code snippet to better understand the question.thanks

var addButton = document.getElementById("add_button");
var ul = document.querySelector("ul");
var input = document.getElementById("entry_box");
var clearBtn = document.getElementById("clear");
var saveBtn = document.getElementById("save");
var emptyBtn = document.getElementById("empty");


function newToDoItem() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";
}

function inputLength() {
  return input.value.length;
}

function addToDoItem() {
  if (inputLength() > 0) {
    newToDoItem();
  }
}

function keyPressEvent(event) {
  if (inputLength() > 0 && event.keyCode === 13) {
    newToDoItem();
  }
}

function toggleToDoItemState(event) {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("done");
  }
}


addButton.addEventListener("click", addToDoItem);
//clearBtn.addEventListener("click", clearCompletedToDoItems);
ul.addEventListener("dblclick", toggleToDoItemState);
input.addEventListener("keypress", keyPressEvent);

*{
    
    padding: px0;
    margin: px0;
}
body{
    width:100%;
    display:-webkit-box;
    -webkit-box-pack:center;
    
    
}

#big_wrapper{
    text-align: center;
    max-width:1000px;
    margin:20px 0px;
    display:-webkit-box;
    background: rgb(201, 207, 214);
    -webkit-box-orient: vertical;
    -webkit-box-flex:1;
    border-radius: 20px;

}
#big_wrapper{
      width:1000px;
    
}
#position{
    padding: 20px;

}
ul {
    cursor: pointer;
}

.done {
    text-decoration: line-through;
}

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8" />
    <title>erand boy</title>
    <link rel="stylesheet" href="todo.css" />
  </head>
  <body>
    <div id="big_wrapper">
      <div id="position">
        <header>
          <h1>My to-do list</h1>
          <p>wirte the list of things you need to do here.</p>
        </header>
        <div>
          <input type="text" id="entry_box" />
          <button id="add_button">Add</button>
          <p><strong>Double click an item to mark it complete.</strong></p>
          <ul id="toDolist" style="text-align: left"></ul>
        </div>
        <div id="button_wrapper">
          <button id="save">Save list</button>
          <button id="clear">Clear completed</button>
          <button id="empty">Empty list</button>
        </div>
      </div>
    </div>
    <script src="to-do.js"></script>
  </body>
</html>

Thrheybsh