Develop Reference

how to hide a specific div when clicking anywhere on screen

I have a search result div which have contains search result list items according to user's search. but i want to hide that result div when user click any where on the screen.
here is my search div code:
<div id="user_search">
<div class="inpt-head-place" style="width:9em;">
<?php echo form_open( '',[ 'class'=>' navbar-left navbar-change','id'=>'search_form']) ?>
<?php echo form_input([ 'type'=>'text','class'=>'form-control form-media search_user_bar','placeholder'=>'Search Here','name'=>'search']); ?>
<div id="search_result" class="search_result"> </div>
</div>
<div class="inpt-head-place" style="width: 20px;">
<button class="btn btn-default btn-resize" type="submit" name="submit" id="submit_here"> <i class="fa fa-search"></i> </button>
<?php echo form_close(); ?>
</div>
</div>
And here is a Snap of search Bar with their results:
Kindly suggest me.. Thanks

You can check if the clicked element, or any child element is the one clicked or the child of the one clicked by binding the click to the document or body:
$(document).on('click', function(e) {
if (!$('#search_result').is(e.target) && $('#search_result').has(e.target).length === 0){
$('#search_result').hide();
}
});

Check below code, it will hide search_result div when you click outside of search_result.
$(document).mouseup(function (e) {
var container = $("#search_result"); //ID of dic you want to hide
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});

you can do this using JS by wrapping the body in a div (or just use the body) and then adding a on click event listener to that div, if the body is clicked just close the search results.
somthing like,
document.getElementById('body-div').addEventListener("click", function(){
//set style of search result to display: none or hide in some reasonable way
});

Deleting and restoring divs toggle

I am trying to create a switch between a div being deleted and it being restored based on an Event trigger. I am using jquery. How do i do that using .click event?

Its simple lets say you will have 2 divs.
use this in in JS
$(document).ready(function() {
$("#div1").hide();
$("#div2").hide();
$('#button1').click(function() {
$("#div1").show();
$("#div2").hide();
});
$('#button2').click(function() {
$("#div1").hide();
$("#div2").show();
});
});
And HTML
<button id="button1" >Show Div1 </button>
<button id="button2" >Show Div2 </button>
<br><br>
<div id="div1" ><h1> Hello </h1></div>
<div id="div2" > <h1> Bye </h1></div>
See a live example here: http://jsfiddle.net/ptqdrr8t/1/

You can find a div and use it with jQuery to move it and also change the styling/content/classnames etc. But it's not always best for performance, you can also consider to show/hide the div instead as was suggested earlier.
An example here:
http://jsfiddle.net/web_nfo/57x4agL7/
Html:
<div id="removedItems"></div>
<div class="item">
<h3>Item1</h3>
<span class="remove">Remove</span>
</div>
jQuery:
$(document).ready(function(){
$('.item span.remove').click(function(){
// Find the item
var $item = $(this).parent();
// You can change the original item
$item
.addClass('removed')
.find('h3').append('<span>[removed]</span>');
// Move the item
$('#removedItems').append( $item );
});
});
Or if you are looking for another way (to really 'remove' the item first) you can store the whole $item object in an array, and use it later on to re-create something. Maybe something like this?
var history = [];
$('.item span.remove').click(function{
var $item = $(this);
history.push( $item );
$item.remove();
});
If you are creating an 'undo' function you also have to remember the position of the item (before it was removed) to put it back at the correct spot.

How to add event on all label in nested div in angular or jquery

i want to add event all label in html.in my code just event occur on first label. how to solve it?
here is sample of my code:
<div id="accordion">
<label class="label">{{}}</label> // just this label event run
<div>
</div>
<div ng-repeat="l in list" class="loop">
<div ng-if="" class="if">
<label class="label">{{}}</label>
<div class="div">
<p> {{}}</p>
</div>
</div>
</div>
</div>
and my jquery code is
$(".label").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion .div').slideUp(300);
}
$(this).next().slideToggle(300);
});

use below code . instead of '.label' use tag name 'label'. it will assign all 'label' tag click event using jquery . see working fiddle
$(document).on('click',"label",function(){
if(false == $(this).next().is(':visible')) {
$('#accordion .div').slideUp(300);
}
$(this).next().slideToggle(300);
});

You can add events to all labels presents in the HTML, by selecting the label like : -
$('label').on('click', (function(){
//do something
}))

how to find some element has child as div in javascript or jquery?

i have a below code.I have tried in several ways by myself..but i can't get it properly.
<div id="div1">
<canvas></canvas>
<div>
</div>
</div>
i need to do is. that is first i need to check whether the div has child div. and if it has child div then need to add span in that. if it don't have child div means need to add child div and need t add span in that.
if($("#div1").has child div)
{
do nothing
}
else{
add div
}
In some other instance, i need to add some span in the the inner div..
please help me..
thanks in advance..

if($('#div').children().find('div').length)
{
}
else
{
$('#div').append('<div>Hi</div>');
}

if ($('#div1').find('div').length) {
} else {
}

This is the JavaScript code you need:
// If no child DIV, add one
if ($("#div1 > div").size() == 0) {
$("#div1").append('<div></div>');
}
// Append a span to the child DIV
$("#div1 > div").append('<span>This is a span.</span>');
DEMO with child DIV:
if ($("#div1 > div").size() == 0) {
$("#div1").append('<div></div>');
}
$("#div1 > div").append('<span>This is a span.</span>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1">
<canvas></canvas>
<div></div>
</div>
DEMO without child DIV:
if ($("#div1 > div").size() == 0) {
$("#div1").append('<div></div>');
}
$("#div1 > div").append('<span>This is a span.</span>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1">
<canvas></canvas>
</div>

if ( $('#div1').find('div').size() != 0 ) {
} else {
}

see demo try this
<div id="div1">
<canvas></canvas>
<div></div> <!-- check also after removing this -->
</div>
(function(){
var nestDiv = $('#div1').children('div').length;
if(nestDiv>0){
$('#div1').children('div').append($('<span></span>',{
text:'Hello',
class: 'nestSpan'
}));
}else{
$('#div1').append($('<div><span>hello from double nested</span></div>'));
}
})()

see the code below:-
$(document).ready(function() {
var mainDiv = $('#div1');
if (mainDiv.find('div').length) {
mainDiv.find('div').append("<span>").text("dev");
} else {
mainDiv.append("<div>").append("<span>").text("dev");
}
});
and i have created a jsfiddle example for you:-
http://jsfiddle.net/c2S5d/11/
you can edit to see the functionality like append the div to it...

check for child element, hide parent if child exists

I have tried this:
<script>
$(document).ready(function() {
$('#title_article:not(:has(>hr:first-child))').hide();
});
</script>
But never shows..
<div id="title_article">
<span style="padding-left:121px;">Article | </span>
<span class="entry-date"><?php echo get_the_date(); ?></span>
</div>
Seeking to check for child element of <hr> if <hr> exists hide parent or #title_article
<hr> would not be within <div id="title_article"></div> but below:
<!-- page content -->
<div id="title_article></div>
<hr>
<!-- page content -->

You are looking for .next()
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
You have to do something like:
if ($('#title_article').next('hr').length)
$('#title_article').hide();
In your example, <hr> is not a child element of #title_article, but a sibling.

$(document).ready(function() {
if($("#title_article").next("hr").length==0)
$("#title_article").hide()
});
http://fiddle.jshell.net/prollygeek/57gcx6or/3/
Edit:
Use .siblings()

You could use the children function jQuery has to offer.
Try it in this context:
if($('#title_article').children('hr').length > 0) {
$('#title_article').hide();
}
Or this:
if($('#title_article').children('hr').length != 0) {
$('#title_article').hide();
}
You could also use the parent function
Try it in this context:
$('#title_article hr').parent().hide();
This will hide every #title_article that has an hr in it.