html添加删除输入框

<div id="app">
    <div class="row no-gutters align-items-center  mb-4">
        <div class="col-10">
            <input type="text" class="form-control">

        </div>
        <div class="col-2" onclick="funcAdd(this)" >
            &nbsp;&nbsp;
            <svg width="2em" height="2em" fill="currentColor">
                <use xlink:href="/images/bootstrap-icons.svg#plus-circle" />
            </svg>

        </div>
    </div>
    
</div>

<script type="text/javascript">
    function funcAdd(self) {
        var r = $("#app");
        var ele = $(self).parent().clone();
        ele.children(".col-2").html('&nbsp;&nbsp;<svg width="2em" height="2em" fill="currentColor"> <use xlink:href="/images/bootstrap-icons.svg#dash-circle" /> </svg>');
        ele.children(".col-2").attr("onclick", "funcDel(this)");
        r.append(ele);
    }
    function funcDel(self) {
        var r = $(self).parent();
        r.remove();

    }
</script>