To Do List using basic JS
Querying for row elements
The original code queries for elements with tag name tr:

var allRows = table.querySelectorAll(&quot;tr&quot;); 


Just as the code utilizes table methods like insertRow(), the property rows could be used instead:
var allRows = table.rows;

That way there is no DOM query each time the button is clicked.
If there was in fact a need to get all elements with tag name tr, the method Element.getElementsByTagName() could be used, and since it &quot;returns a live HTMLCollection of elements&quot;1 that could happen outside the click handler (e.g. where the other elements fetched by Id are stored). For more information about the differences refer to answers to this post from 2010 which (at the time) claimed “querySelectorAll(&quot;a&quot;) is a shocking 98% slower than getElementsByTagName(&quot;a&quot;)”, as well as answers to What is the difference between querySelector and getElementsByTagName? like Quentin's answer plus this jsPerf test.

inline onfocus handler vs Javascript
The markup contains the text input element with the onfocus attribute:

 &lt;input id=&quot;input&quot; class=&quot;input&quot; type=&quot;text&quot; placeholder=&quot;Enter here!!!&quot; onfocus=&quot;this.value=' ' &quot;&gt;


Instead of specifying the focus handler in the markup, it can be added in the JavaScript. That way there is a separation between the business logic and the markup. One way to do this is to use Element.addEventListener() to add a callback function whenever an event occurs. See the example code below:
input.addEventListener('focus', function(event) {
    input.value = ' '; // could also use event.target instead of input
});

That way the logic of clearing the value is separated from the markup.