如何在 onBlur 事件中删除 DIV 元素的所有子元素？答案

【问题标题】：How can I remove all child element of DIV element on onBlur event?如何在 onBlur 事件中删除 DIV 元素的所有子元素？
【发布时间】：2017-01-22 06:24:24
【问题描述】：

我有一个网页，我在其中定义了一个 id 为“selectedProduct”的 DIV 元素，现在当我单击特定链接时，它会调用 ajax 请求，它会用响应数据填充 DIV 元素。但我要求当 onBlur 事件发生在“selectedProduct”DIV 上时，它应该删除它的所有子元素。我的代码如下：

<script type="text/javascript">
function getPage(event,id)
{
    event.preventDefault();
    var page = document.getElementById(id).id + ".html";
    var dataString = page               

    $.ajax(
    {
        type: "POST",
        url: page,
        data: dataString,
        cache: false,
        success: function(result)
        {
            var result=result;

            $("#selectedProduct").html(result);
            //  location.replace("index1.html");                                                
        }
    });
}

function focOFF(id)
{
 // I don't have any idea what code should i write here which can remove all child of DIV element....
}
</script>

<body>
<a href="#selectedProduct" style="text-decoration:none" id="solar_power_plant" target="new" onClick="getPage(event,this.id)" class="scroll">Solar Power Plant</a>

<div id="selectedProduct" onBlur="focOFF(this.id)">
</div>

</body>

【问题讨论】：

onBlur 事件是否可以与 DIV 元素一起使用？我认为它不起作用。

标签： javascript jquery html ajax dom

【解决方案1】：

使用以下解决方案获取所有子元素并删除它们，

function focOFF(id)
{
    $( "#"+id ).children().remove();
}

【讨论】：

onBlur 事件是否可以与 DIV 元素一起使用？我认为它不起作用。
按照这个在 div 中制作 onblur stackoverflow.com/questions/18504139/div-onblur-function

【解决方案2】：

document.getElementById(id).innerHTML = '';

【讨论】：

onBlur 事件是否可以与 DIV 元素一起使用？我认为它不起作用。
在模糊 div 下是什么意思？您想实现哪种行为？
当鼠标离开 div 元素时，div 应该为空，这意味着 div 的所有子元素都应该被删除。

【解决方案3】：

在你的模糊函数中使用empty() 函数。它删除所选元素的所有子节点

function focOFF(id)
{
  $('#'+id).empty();
}

【讨论】：

onBlur 事件是否可以与 DIV 元素一起使用？我认为它不起作用。
什么时候删除 div 的子项？点击？
onBlur 事件应该删除所有子项
onblur 不适用于 div.. 检查 div 的 onmouseout 事件并为其调用上述函数。