Untitled

<!DOCTYPE html>
<html>
<head>
    <title>JS DOM</title>
</head>
<body>
    <div>
        <h1 id="heading">JS DOM</h1>
        <ul>
            <li>
                <span>John</span>
                <button class="del">Delete</button>
            </li>
            <li>
                <span>Paul</span>
                <button class="del">Delete</button>
            <li>
                <span>George</span>
                <button class="del">Delete</button>
            </li>
            <li>
                <span>Ringo</span>
                <button class="del">Delete</button>
            </li>
        </ul>
        <input id="input"  placeholder="Add Name">
        <button class="add">Add</button>
    </div>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

let x = document.querySelector("ul");
let btn = document.querySelectorAll(".del")
let btn1 = document.querySelector(".add");

 x.addEventListener("click", function(e){
    if (e.target.className == "del"){
        const li = e.target.parentElement;
        x.removeChild(li)
    }
 })

btn1.addEventListener("click", function(){
    let z = (input.value);
    let span = document.createElement("span");
    let node = document.createElement("li");
    let text = document.createTextNode(z);
    let x = document.querySelector("ul");

    let addBtn = document.createElement("button");
    addBtn.innerHTML = "Delete"

    span.appendChild(text);
    x.appendChild(node);
    node.appendChild(span);
    node.appendChild(addBtn);
});

if (e.target.className == "del"){
    const li = e.target.parentElement;
    x.removeChild(li)
}

<button class="del">Delete</button>

let addBtn = document.createElement("button");
addBtn.innerHTML = "Delete"
// ...
node.appendChild(addBtn);

addBtn.className = 'del';