将display设置为none将svg元素从DOM中移除

Setting display to none remove the svg element from DOM

本文关键字:DOM svg display 设置 none 元素      更新时间:2023-09-26

使用jquery或javascript将display设置为none会将svg元素从DOM中移除。这很奇怪。

我试图显示一个弹出对话框与确定和取消按钮使用jquery工作,但点击任何按钮后,它从DOM删除整个svg元素

代码:

<div id="dialog" class="bs-example web_dialog">
    <form>
        <div class="form-group">
            <div class="col-lg-4" style="left: 173px; top: 258px; visibility: visible; position: absolute; overflow: visible; border: 1px solid #C5C5C5">
                <label for="inputEmail">Unique Id/Mobile Number:</label>
                <input type="number" class="form-control" id="inputEmail" placeholder="Unique Id" width="10px">
                <label for="inputPassword">Document URL</label>
                <input type="url" class="form-control" id="inputPassword" placeholder="URL">
                <br>
                <div class="btn-sm">
                    <button type="submit" id="btn_save" class="btn btn-primary btn-sm">Ok</button>
                    <button type="submit" id="btn_cancel" class="btn btn-primary btn-sm"  onclick="closePopUp(event)">Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>
<button type="submit" id="btn_cancel" class="btn btn-primary btn-sm"  onclick="closePopUp()">Cancel</button>
function closePopUp()
{
    document.getElementById('dialog').style.display = 'none';
}

执行上面的操作是从DOM中移除svg元素

在表单中按提交按钮是问题所在。即使表单元素没有任何表单属性的常见属性,按下提交按钮也会重新加载页面

选项1:除非你正在提交数据否则不要使用

选项2:在提交按钮onclick

中返回falsep