I have 1 function that creates a new checkbox with a delete button to remove it. However when using onclick for the delete button, it causes the it to be deleted when the create checkbox is activated so that nothing is there in the first place.

<script>
    var list = document.getElementById("list");
    var i = 0;

    function add_client(form) {

        var div = document.createElement("div");
        div.setAttribute("id", "div"+i.toString())

        var check = document.createElement("input")
        check.setAttribute("type", "checkbox");
        check.setAttribute("id", "check"+i.toString());

        var label = document.createElement("label");
        label.setAttribute("for", "check"+i.toString());
        label.setAttribute("id", "label")
        txtNode = document.createTextNode(form.value);
        label.appendChild(txtNode);

        var br = document.createElement("br");

        div.appendChild(check);
        div.appendChild(label);
        list.appendChild(div)
        i++;
        

        var del = document.createElement("input");
        del.setAttribute("type", "button");
        del.setAttribute("value", "Delete");
        del.setAttribute("id", "del")
        div.appendChild(del);
        del.onclick = del.remove();

        div.appendChild(br);

    }
</script>

i know this is a DOM issue but cannot get around it.... any ideas?