how to make a 3cli 3e when clicked on a button js

1(function () {
2  document.querySelector('#add').addEventListener('click', function () {
3    let input = document.querySelector('#text');
4    let list = document.querySelector('#list'); 
5    
6    let item = document.createElement('li'); // create li node
7    let itemText = document.createTextNode(input.value); // create text node
8    
9    item.appendChild(itemText); // append text node to li node
10    list.appendChild(item); // append li node to list
11    
12    input.value = ""; // clear input
13  });
14})();

1function AddLi(str)
2{
3    var li = document.createElement('li');
4    li.appendChild(document.createTextNode(str))
5    li.innerHTML += ' <button onclick="this.parentNode.remove()">-</button>';
6    document.getElementById("out").appendChild(li);
7}

1<div>
2  <input id="text" type="text" />
3  <button id="add">Add</button>
4</div>
5
6<ul id="list">
7  <li>example item</li>
8</ul>

1<form>
2    <input type="text" name="userinput">
3    <input type="button" value="Add LI" onclick="AddLi(userinput.value)">
4</form> 
5<span id="out"/>