How can I remove all child element of DIV element on onBlur event?
Question
I have a web page where I have defined one DIV element with id "selectedProduct", now while I click on particular link it will call ajax request and it will fill DIV element with response data. But i have requirement that when onBlur event occurs on "selectedProduct" DIV, it should remove all the child element of it's. My code is as follow:
<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>
3 answers
solution1
3 ACCPTED 2016-09-14 12:35:36
Use the below solution of getting all child elements and the removing them,
function focOFF(id)
{
$( "#"+id ).children().remove();
}
solution2
0 2016-09-14 12:34:25
Use empty( ) function inside your blur function . It removes all child nodes of selected element
function focOFF(id)
{
$('#'+id).empty();
}
solution3
0 2016-09-14 12:34:54
document.getElementById(id).innerHTML = '';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.