How To Remove Single Or Multiple Attributes:

Examples:

Example 1: Remove single attribute from an element:

In this example, we have a div with an attribute called “style”. This “style” attribute contains multiple properties such as “background-color” and “color”. We also have a button and when this button is clicked, we will remove the style attribute and the div will appear plain.

<div id="my_div1" style="background-color: gold; color: darkgreen;">This is a div with a single "style" attribute.</div>

<input type="submit" name="sbt_remove_single_property" id="sbt_remove_single_property" value="Remove Style Attribute">

<script type="text/javascript" language="javascript">

   $(document).ready(function () {

       $('#sbt_remove_single_property').on("click", function () {

           $('#my_div1').removeAttr('style');

       });

   });

</script>

Example 2: Remove multiple attributes from an element:

In this example, we have a div with an attribute called “style” and “class”. This “style” attribute contains multiple properties such as “background-color” and “color”. The “class” attribute contains multiple properties that affects the way this div is displayed even further. Next, we have a button and when this button is clicked, we will remove both the “style” and the “class” attributes and the div will appear plain.

<div id="my_div2" class="highlight" style="background-color: lightblue; color: purple;">This is a div with multiple attributes (style and class).</div>

<input type="submit" name="sbt_remove_multiple_properties" id="sbt_remove_multiple_properties" value="Remove Style and Class Attributes">

<script type="text/javascript" language="javascript">

   $(document).ready(function () {

       $('#sbt_remove_multiple_properties').on("click", function () {

           $('#my_div2').removeAttr('style class');

       });

   });

</script>

Conclusion:

So from the above example, we can conclude that we can remove a single attribute or multiple attributes from any element. To remove multiple attributes, simply specifying the attributes separated by space will suffice.

How to remove a specifc inline property using jQuery

Let’s look at how to do this by means of an example. Assume that you have a div with ID “my_div“. This div has four properties such as width, height and background color and color applied inline to it. So it would look something like this:

<div id="my_div" style="width: 50%; height: 50%; background-color:red; color:green;">
This is my div with a background
</div>

Now you would like to remove the background-color property alone and leave the other properties with their respective values as it is. In order to so, here’s what you would need to do:

$('#my_div').css("background-color", "");

Considering the above example, if you just wanted to remove the height property of the div and retain the others as they are, here’s what needs to be done:

$('#my_div').css("height", "");

So you see, it’s very easy to remove any specific property along with its value applied to any element when inline styles are applied to the element.

NOTE:

One thing to remember is that removing any property in the way indicated above, will not overwrite the stylesheet itself. That means, your styles will be intact in the stylesheet. The targeted inline property will be just removed from the element in the DOM.

That’s it!

Has this post helped you? Feel free to suggest by commenting below.

How To Detect Click Outside An Element Using jQuery

Let’s assume that we have a div with ID “my_div”. Now we would like to show an alert when we click inside this div and another alert when we click outside this div. Here’s an example of how it can be done:

<style type="text/css">
#my_div {
	background-color: #FC9;
	padding: 25px;
	border: 1px solid #F60;
}
</style>

<div id="my_div" class="my_class">This is some content. Click inside this div once and click outside this div to see the alerts.</div>

<script type="text/javascript">
$(document).ready(function() {

	$('#my_div').click(function(event){		
		var id = $(this).attr('id');		
		alert('You clicked INSIDE the Div with ID #'+ id);		
		event.stopPropagation();		
	});

	$('html').click(function() {		
		alert('You clicked OUTSIDE the div');		
	});
});
</script>

First, we target the div and we attach a click event to it so that we can see an alert when it is clicked upon. To show an alert when we click outside the div, we target the html tag.

Your Turn!

Do you know of any other ways of detecting click outside an element using jQuery? Feel free to suggest by commenting below.

How To Check Or Uncheck Checkbox Using jQuery

Let’s assume that we have a checkboxe with ID “mycheckbox”. Now let’s see how to check and uncheck this checkbox when two different buttons are clicked by means of examples.

Here’s the common HTML for the following examples:

<input name="mycheckbox" type="checkbox" id="mycheckbox" /> This is my checkbox

<p>	
<input type="submit" name="sbt_check" id="sbt_check" value="Check Checkbox">

<input type="submit" name="sbt_uncheck" id="sbt_uncheck" value="Uncheck Checkbox">

</p>

Example 1: Check a Checkbox when a button is clicked

	//Check a checkbox
	$('#sbt_check').on("click", function(e){		

		$('#mycheckbox').prop('checked', true);

		e.preventDefault();

	});

Example 2: Uncheck a Checkbox when a button is clicked

	//Uncheck a checkbox
	$('#sbt_uncheck').on("click", function(e){		

		$('#mycheckbox').prop('checked', false);

		e.preventDefault();

	});

Simple, isn’t it?

Do you know of any other ways to check or uncheck a checkbox using jQuery? Feel free to suggest by commenting below.

How To Check If Div Is Empty Using jQuery

Let’s assume that we have three  divs with IDs ‘my_div1’, ‘my_div2’ and ‘my_div3’.

‘my_div1’ will not contain any content,  ‘my_div2’ will have content in it and  ‘my_div3’ will contain only a single space and no actual content. Now we will check if there are any contents in these div or not using jQuery

Here is the common HTML for all the following examples:

	<div id="my_div1"></div>

	<div id="my_div2">This is the second div and it has some content. Div 1 is located above and it is invisible as it does not have any content. But you should be able to see the purple borders on the div 1 above. There is another div with red border below.</div>    

	<div id="my_div3"> </div>    

<br>

<input type="submit" name="sbt_check1" id="sbt_check1" value="Check if Div 1 is empty">

<input type="submit" name="sbt_check2" id="sbt_check2" value="Check if Div 2 is empty">

<input type="submit" name="sbt_check3" id="sbt_check3" value="Check if Div 3 is empty">

<input type="submit" name="sbt_check4" id="sbt_check4" value="Check if Div 3 is empty After Applying Trim">

Example 1:  Check if div is empty and alert the status when a button is clicked

<script type="text/javascript">

$(document).ready(function(){

	$('#sbt_check1').on("click", function(e){		

		if( $('#my_div1').is(':empty') ) 
			{	
			alert('Div 1 is Empty!');
		}
		else
		{
			alert('Div 1 is NOT Empty!');			
		}

		e.preventDefault();

	});

	$('#sbt_check2').on("click", function(e){

		if( $('#my_div2').is(':empty') ) 
		{	
			alert('Div 2 is Empty!');
		}
		else
		{
			alert('Div 2 is NOT Empty!');			
		}					

		e.preventDefault();

	});

	$('#sbt_check3').on("click", function(e){

		if( $('#my_div3').is(':empty') ) 
		{	
			alert('Div 3 is Empty!');
		}
		else
		{
			alert('Div 3 is NOT Empty!');			
		}					

		e.preventDefault();

	});		

});

</script>

Results of Example 1:

When you run the above code and click on the first button, you will see an alert that says that my_div1 is Empty. This is correct as there is no content in it.

When you click on the second button, you will see an alert that says that my_div2 is Not Empty. This is correct as there is some custom content in it.

When you click on the third button, you will see an alert that says that my_div3 is NOT Empty. Well, as far as we can see, there is no content in it. Yet, the alert says that my_div3 is NOT empty. Why? Are you surprised why? Well, here’s the reason. ‘my_div3’ does not contain any actual text or any other HTML content BUT it does contain a “space” or “white space”. Now even a space is considered as the content of a div. And for this reason, we see the alert that it is NOT empty. So how to fix this? Our next example will solve this situation.

Example 2:  Apply trim to a div’s content and then check if it is empty or not

	$('#sbt_check4').on("click", function(e){

		//Get the HTML content of the div
		var div3_content = $('#my_div3').html();

		//Apply trim to the retrieved HTML content and then perform the check		
		if( $.trim(div3_content) == '' ) 
		{	
			alert('Div 3 is Empty!');
		}
		else
		{
			alert('Div 3 is NOT Empty!');			
		}					

		e.preventDefault();

	});

In the above code, we first retrieve the HTML content of the “my_div3” . This will remove any spaces in the retrieved content. Now we check this to see if it is empty or not. This will give us the correct output.

Your Turn!

Do you know of any other ways to check if a div is empty or not using jQuery? Feel free to suggest by commenting below.

How To Change Select Options Using jQuery

Let’s assume that we have a select dropdown list that contains the state “Texas” as one of  the values in it. Now we will see different examples that show us how to remove this existing value and add new ones to it.

Here is the common HTML code for all the following examples:

<label for="states">States</label>
<select name="states" id="states">
  <option value="Texas">Texas</option>
</select>

<input type="submit" name="sbt_change_single" id="sbt_change_single" value="Change options with Single Option">

<input type="submit" name="sbt_change_array" id="sbt_change_array" value="Change options with Array Options">

Example 1: Remove existing select dropdown list options and add a single new option to it

<script type="text/javascript">

$(document).ready(function(){	

	$('#sbt_change_single').on("click", function(e){

		//Remove all existing options of the dropdown list
		$("#states").empty();			

		//Prepare the new option
		var new_option = $('<option></option>').attr("value", "AL").text("Alabama");

		//Add the new option to the recently cleared select dropdown
		$("#states").append(new_option);

		e.preventDefault();

	});

});

</script>

In the above example, when the first button is clicked, we can see that the exiting option is removed completely and the new option is added. This method is desirable when you wish to add only one new option. If you want to add multiple options, then take a look at the example below.

Example 2: Remove existing select dropdown list options and add multiple new options to it from an array

<script type="text/javascript">

$(document).ready(function(){	

	$('#sbt_change_array').on("click", function(e){

		//Remove all existing options of the dropdown list
		$("#states").empty();			

		//Prepare the multiple new options
		var new_states = {"Illinois": "IL",
						  "California": "CA",
						  "New Jersey": "NJ"
						};

		//Add all options to the recently cleared select dropdown
		$.each(new_states, function(key, value) {

		  $("#states").append($("<option></option>").attr("value", value).text(key));

		});	

		e.preventDefault();

	});

});

</script>

In the above example, when the second button is clicked, you can see that all the existing options of the dropdown are removed and new options from the array are added.

Simple, isn’t it?

Do you know of any other ways to change options of a select dropdown list using jQuery? Feel free to suggest by commenting below.

How To Find If A Value Exists In Array Or Not Using jQuery

Let’s assume that we have an array of fruits. Now we would like to search if this array contains a fruit of our choice. Let’s see how this can be done.

Example: Check if a value exists in an array when a button is clicked

<input type="submit" name="sbt_check" id="sbt_check" value="Check if 'mango' exists in array">

<input type="submit" name="sbt_check_straw" id="sbt_check_straw" value="Check if 'strawberry' exists in array">

<script type="text/javascript">

$(document).ready(function(){

var fruits_array = new Array('grapes', 'apple', 'mango');	

$('#sbt_check').on("click", function(e){

	var search_for = 'mango';

	if($.inArray(search_for, fruits_array) > -1)
	{
		alert("Mango exists in the array");
	}
	else
	{
		alert("Mange does not exist in array");
	}

	e.preventDefault();

});

$('#sbt_check_straw').on("click", function(e){

	var search_for = 'strawberry';

	if($.inArray(search_for, fruits_array) > -1)
	{
		alert("Strawberry exists in the array");
	}
	else
	{
		alert("Strawberry does not exist in array");
	}

	e.preventDefault();

});

});

</script>

In the above example, when the first button is clicked, the value ‘mango’ is searched for and the result is displayed. When the second button is clicked, the value ‘strawberry’ is searched for and the result is displayed.

Simple, isn’t it?

Do you know of any other ways to find value in array of objects using jQuery? Feel free to suggest by commenting below.

How To Count Occurrences In String Using JavaScript

Let’s look at how to do this with an example. Consider that we have a string that says: “This is a string.”. Now we want to find out the number of times the word “is” has repeated in that string. So here’s how it can be done in the most simplest way:

Example:

<p>The string that needs to be searched in is: <strong>"This is a string."</strong>. So this is our Haystack.</p>
<p>We want to search fo the word <strong>"is"</strong>. So this is our Needle.</p>
<p>You should see an alert as soon as the page loads.</p>

<script type="text/javascript">
var temp = "This is a string.";
// the g in the regular expression says to search the whole string 
// rather than just find the first occurrence
var count = temp.match(/is/g);  
alert('The word "is" is repeated ' + count.length + ' times.');
</script>

Simple, isn’t it?

Do you know of any other ways to count the number of times a string or a word is repeated in another string using JavaScript? Feel free to suggest by commenting below.

How To Use the first-of-type Selector in jQuery

Let’s take a look at a quick example. The following is the HTML Source code used in the examples.

<style type="text/css">
#my_div {
	background-color: #DBF0FF;
	border: 1px solid #06F;
}
.new_div {
	background-color: #FFDF9D;
	border: 1px solid #F90;
}
.purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
table td {
	border: 1px solid #CCC;
}

</style>

<div class="divs_container">

<div id="my_div1">This is My Div 1.</div>

<div id="my_div2">This is My Div 2.</div>

<div id="my_div3">This is My Div 3.</div>

<div id="my_div4" class="new_div">This is My Div 4

<span id="sp1">Span 1</span>

<p id="p1">Para 1</p>

<span id="sp2">Span 2</span>

<p id="p2">Para 2</p>

<p id="p3">Para 3</p>

</div>

<br>

<table width="100%" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</div>

<p>	
  <input type="submit" name="sbt_add1" id="sbt_add1" value="Add Class to First Div">

<input type="submit" name="sbt_add2" id="sbt_add2" value="Add Class to First p">

<input type="submit" name="sbt_add2" id="sbt_add3" value="Add Class to First span"><br>

<input type="submit" name="sbt_add3" id="sbt_add4" value="Add Class to First td of Table">

</p>

Example 1: Select first element of type div and adding custom class to it when a button is clicked

	$('#sbt_add1').on("click", function(e){		

		$('.divs_container div:first-of-type').addClass('purple');

		e.preventDefault();

	});

Example 2: Select first element of type p and adding custom class to it when a button is clicked

	$('#sbt_add2').on("click", function(e){			

		$('.divs_container p:first-of-type').addClass('purple');				

		e.preventDefault();

	});

Example 3: Select first element of type span and adding custom class to it when a button is clicked

	$('#sbt_add3').on("click", function(e){			

		$('.divs_container span:first-of-type').addClass('purple');				

		e.preventDefault();

	});

Example 4: Select first element of type td and adding custom class to it when a button is clicked

	$('#sbt_add4').on("click", function(e){		

		$('.divs_container table td:first-of-type').addClass('purple');

		e.preventDefault();

	});

Simple, isn’t it?

Do you know of any other ways to use the :first-of-type selector in jQuery? Feel free to suggest by commenting below.

How To Use :first-child Selector

The first-child selector basically selects all elements that are the first child of their parent.

Let’s take a look at a quick example. The following is the HTML Source code used in the examples.

<div class="divs_container">

<div id="my_div1">This is My Div 1.</div>

<div id="my_div2">This is My Div 2.</div>

<div id="my_div3">This is My Div 3.</div>

<div id="my_div4" class="new_div">This is My Div 4

<p id="p1">Para 1</p>

<p id="p2">Para 2</p>

<p id="p3">Para 3</p>

</div>

<br>

<table width="100%" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</div>

<p>	
  <input type="submit" name="sbt_add1" id="sbt_add1" value="Add Class to First Div Child">

<input type="submit" name="sbt_add2" id="sbt_add2" value="Add Class to First p child"><br>

<input type="submit" name="sbt_add3" id="sbt_add3" value="Add Class to First child of Table">

<br>
<input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything">

</p>

Example 1: Select first level child div and add custom class to it when a button is clicked

	$('#sbt_add1').on("click", function(e){		

		$('.divs_container div:first-child').addClass('purple');

		e.preventDefault();

	});

Example 2: Select first level child p tag and add custom class to it when a button is clicked

	$('#sbt_add2').on("click", function(e){			

		$('.divs_container p:first-child').addClass('purple');				

		e.preventDefault();

	});

Example 3: Select first level child table cell and add custom class to it when a button is clicked

	$('#sbt_add3').on("click", function(e){		

		$('.divs_container table td:first-child').addClass('purple');

		e.preventDefault();

	});

Simple, isn’t it?

Do you know of any other ways to use the :first-child selector in jQuery? Feel free to suggest by commenting below.