jquery Archives - Ebhor.com

Jquery remove element : remove text HTML div image table

September 13, 2022September 12, 2022 by manish

Jquery remove element is a way to remove an element from DOM. Jquery remove element on button click The remove() is very useful to remove the elements

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <h2>Example of Jquery Remove()</h2>
        <p>Remove this line</p>
        <button>Remove Paragraph</button>
        <script>
            $( "button" ).click(function() {
              $( "p" ).remove();
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Example of Jquery Remove()</h2>

<p>Remove this line</p>

<button>Remove Paragraph</button>

$( "button" ).click(function() {

$( "p" ).remove();

});

</script>

</body>

</html>

How to remove Jquery element by class To remove any class in html remove() is used. In following example class two is removed on button click event. … Read more

Javascript jquery checkbox checked, unchecked, ischecked

May 26, 2022May 8, 2022 by manish

Here we will see the Javascript jquery checkbox checked and unchecked and ischecked examples. Input type checkbox How to create input checkbox in HTML.. for this, we have to use the input type checkbox. along with type we used other attributes line name value and id.

 <input type="checkbox" name="hobby" value="music" id="ck1">    Music

1	<input type="checkbox" name="hobby" value="music" id="ck1"> Music

Jquery checkbox checked To select check boxes $(“#ck1”).prop(“checked”,true); … Read more

How to get multiple checkbox value in javascript and JQuery

April 14, 2022April 13, 2022 by manish

On many websites, you find multiple check box forms to select your interest, or to select multiple options. That can be created by using the HTML check box.

<input type="checkbox" name="Hobby" value="Painting" id="cb1">

1	<input type="checkbox" name="Hobby" value="Painting" id="cb1">

Here to make an input as a text box we need type=”checkbox”. name is a name given to a text box value property that specifies what … Read more

Add active class onclick javascript and jQuery

August 8, 2021January 20, 2021 by manish

Add active class to a div on javascript onclick event Here we are applying a style to a simple div. Steps to add a css class on click event Create a div with specific id (here id=”text”) on click on div call a method makeActive() Define a function makeActive() in side <script> tag. Inside makeActive() … Read more

Jquery html method

November 8, 2019January 1, 2015 by manish

html() is used to get or set the html content in matched selector. Getting content using html() Html() get contents with html tags of specified selector If more then one elements are there with same selector then only first matched elements content are get using html(). for setting html content we pass string argument in … Read more

Jquery toggle an element

November 8, 2019December 27, 2014 by manish

toggle is a method which is used to show and hide the selected class. if select element is hidden then on toggle it will show element. If element is not hidden on toggle it will hide the element.

<div class="description">
    <h1>Photography</h1>
    <p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.</p>
</div>
<input type="submit" value="Toggle" id="toggle" />

<h1>Photography</h1>

<p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.</p>

</div>

$(document).ready(function () {
    $(document).on('click', '#toggle', function (event) {
        $(".description").toggle();
    });
});

$(document).ready(function () {

$(document).on('click', '#toggle', function (event) {

$(".description").toggle();

});

Output We can also specify the toggle time and function to perform task of toggle … Read more

Hide and show html elements using jquery

November 8, 2019December 27, 2014 by manish

Hide and show function are used to show and hide any html element. Here on button click we are showing and hiding the div.

<div class="description">
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
</div>
 <input type="submit" value="Hide" id="hide" />
 <input type="submit" value="Show" id="show" />

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

</div>

$(document).ready(function () {
    $(document).on('click', '#hide', function (event) {
       $(".description").hide();
    });
     $(document).on('click', '#show', function (event) {
       $(".description").show();
    });
});

$(document).ready(function () {

$(document).on('click', '#hide', function (event) {

$(".description").hide();

});

$(document).on('click', '#show', function (event) {

$(".description").show();

});

Output We can also provide how long this hide or show will take place be specifying the time like $(“.description”).hide(2000); or $(“.description”).show(2000); to perform specific task after hide or … Read more

jquery get parent id based on class value

November 6, 2021December 27, 2014 by manish

If we have nested divs one inside another and we want to get id of parent div for this we use parents(). suppose following div structure

<div class="level1" id="level1_123">

<div class="level2" id="level2_324">

<div class="level3" id="level3_567">

<div class="level4" id="level4_985">
                <input type="submit" value="Get Parent Id" id="submit">
</div>

</div>

</div>

</div>

</div>

$(document).ready(function () {
    $(document).on('click', '#submit', function (event) {
        event.preventDefault();
        var parentId = $(this).parents(".level1").attr("id");
        alert(parentId);
    });
});

$(document).ready(function () {

$(document).on('click', '#submit', function (event) {

event.preventDefault();

var parentId = $(this).parents(".level1").attr("id");

alert(parentId);

});

as above we have seen how to get id for top parent and similar we can get id or class value for any level of parent. for … Read more

Getting id and class value of a html element

November 8, 2019December 27, 2014 by manish

We have a div and we want to get its id value based on its class value. Suppose a div is given as below and we want to fetch div id based on a button click. for getting attribute id we use attr() method. Example

<div class="select" id="select_25">
This is a ball
</div>
<input type="submit" value="Get Id" id="submit">

This is a ball

</div>

$(document).ready(function () {
    $(document).on('click', '#submit', function (event) {
        event.preventDefault();
         alert("id is "+$(".select").attr('id'));
         alert("class is "+$("#select_25").attr('class'));
    });
});

$(document).ready(function () {

$(document).on('click', '#submit', function (event) {

event.preventDefault();

alert("id is "+$(".select").attr('id'));

alert("class is "+$("#select_25").attr('class'));

});

Output

Changing text on mouse over event

November 8, 2019December 27, 2014 by manish

Change text of html element on mouseover and on mouseleave event it should show original message. Example

<div id="message">
 Hi How are you
</div>

Hi How are you

</div>

$(document).ready(function() {
      $(document).on('mouseover', '#message', function(event) {
        event.preventDefault();
        $("#message").text("I am fine");
    }).on('mouseleave', '#message', function(event) {
        event.preventDefault();
        $("#message").text("Hi How are you");
    });
});

$(document).ready(function() {

$(document).on('mouseover', '#message', function(event) {

event.preventDefault();

$("#message").text("I am fine");

}).on('mouseleave', '#message', function(event) {

event.preventDefault();

$("#message").text("Hi How are you");

});

Output: