jQuery parent() Function Explained

Question

jQuery parent() Function Explained

checkout this code snippet - https://jsfiddle.net/johndoe1994/xtu09zz9/

Let me explain the functionality of the code

The code contains two containers: .first and .second. The .first container has two default divs with a class of .item. The .second container starts empty.

When you hover over each .item, you will see bootstrap glyphicons in the shape of hearts.

If you click on an .item, it will move to the .second container. When you hover over the .item in the .second container, the heart glyphicon will change to a minus sign.

Although the code looks good, there is a small issue with the jQuery part.

In the current implementation, all clicks on the .item container trigger a clone() action to the .second container. However, the desired behavior is to only trigger the clone() when clicking on the glyphicon inside the .item container. Here is where I need help tweaking the jQuery code.

Should I use the parent() method or another jQuery method like closest() or has()? Your assistance would be greatly appreciated.

Please assist me with resolving this issue.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

To make the .gliphicon clickable, simply select the .item and use it in place of $(this). Check out the updated jsfiddle for reference:

$(document).on('click', '.glyphicon', function() {

var item = $(this).closest(".item");

if(item.parent().attr("class") == "itemList") {
    item.clone().appendTo('.second');
    $(this).prop('disabled', true);
    item.css({"opacity": "0.2", "-webkit-user-select": "none"});
}
else { //NEW ELSE
    var i = $('.itemList').find('[data-state="' + item.data('state') + '"]');

        i.css({"opacity": "1", "-webkit-user-select": "true"});
        i.find(".glyphicon").prop('disabled', false);

    item.remove();
}


});

Answer 2

To make the .gliphicon clickable, simply select the .item and use it in place of $(this). Check out the updated jsfiddle for reference:

$(document).on('click', '.glyphicon', function() {

var item = $(this).closest(".item");

if(item.parent().attr("class") == "itemList") {
    item.clone().appendTo('.second');
    $(this).prop('disabled', true);
    item.css({"opacity": "0.2", "-webkit-user-select": "none"});
}
else { //NEW ELSE
    var i = $('.itemList').find('[data-state="' + item.data('state') + '"]');

        i.css({"opacity": "1", "-webkit-user-select": "true"});
        i.find(".glyphicon").prop('disabled', false);

    item.remove();
}


});

Answer 3

Answer №2

Simply add a data-attribute as an extra, no other changes were made in the HTML. I also included event binding for elements with the class glyphicon-minus-sign.

When removing the element, make sure to use .closest('.item') because using $(this).remove() will remove the icon.

Here is an alternative way to rewrite your logic:

HTML:

<div class="first">
  <div class="itemList">
    <div class="item elem" data-state="loren">
      <div class="desc">Loren Ipsum Dolor</div>
      <div class="icons">
        <i class="glyphicon glyphicon-heart"></i>
        <i class="glyphicon glyphicon-minus-sign" data-state="loren"></i>
      </div>
    </div>
    <div class="item elem" data-state="sic">
      <div class="desc">Sic Amet</div>
      <div class="icons">
        <i class="glyphicon glyphicon-heart"></i>
        <i class="glyphicon glyphicon-minus-sign" data-state="sic"></i>
      </div>
    </div>
  </div>
</div>
<div class="second"></div>

JS:

$(document).on('click', '.elem, .glyphicon-minus-sign', function(e) {
  e.stopPropagation();
  if ($(this).parent().attr("class") == "itemList") {
    $(this).removeClass("elem");
    $(this).clone().appendTo('.second');
    $(this).prop('disabled', true);
    $(this).css({
      "opacity": "0.2",
      "-webkit-user-select": "none"
    });
  } else {
    $('.itemList')
      .find('div[data-state="' + $(this).data('state') + '"]')
      .prop('disabled', false)
      .css({
        "opacity": "1",
        "-webkit-user-select": "true"
      }).addClass("elem");
    $(this).closest('.item').remove();
  }
});

DEMO

Answer 4

Simply add a data-attribute as an extra, no other changes were made in the HTML. I also included event binding for elements with the class glyphicon-minus-sign.

When removing the element, make sure to use .closest('.item') because using $(this).remove() will remove the icon.

Here is an alternative way to rewrite your logic:

HTML:

<div class="first">
  <div class="itemList">
    <div class="item elem" data-state="loren">
      <div class="desc">Loren Ipsum Dolor</div>
      <div class="icons">
        <i class="glyphicon glyphicon-heart"></i>
        <i class="glyphicon glyphicon-minus-sign" data-state="loren"></i>
      </div>
    </div>
    <div class="item elem" data-state="sic">
      <div class="desc">Sic Amet</div>
      <div class="icons">
        <i class="glyphicon glyphicon-heart"></i>
        <i class="glyphicon glyphicon-minus-sign" data-state="sic"></i>
      </div>
    </div>
  </div>
</div>
<div class="second"></div>

JS:

$(document).on('click', '.elem, .glyphicon-minus-sign', function(e) {
  e.stopPropagation();
  if ($(this).parent().attr("class") == "itemList") {
    $(this).removeClass("elem");
    $(this).clone().appendTo('.second');
    $(this).prop('disabled', true);
    $(this).css({
      "opacity": "0.2",
      "-webkit-user-select": "none"
    });
  } else {
    $('.itemList')
      .find('div[data-state="' + $(this).data('state') + '"]')
      .prop('disabled', false)
      .css({
        "opacity": "1",
        "-webkit-user-select": "true"
      }).addClass("elem");
    $(this).closest('.item').remove();
  }
});

DEMO

Answer 5

Answer №3

One approach you could take is to utilize the parents selector in jQuery. In this case, if the parent of your glyphicon has a class of 'icons' and is located at position 0, you can implement the following logic:

$(document).ready(function(){

    $(".glyphicon").click(function() {
        if($(this).parents().eq(3).attr("class") == "itemList") {
          $(this).clone().appendTo('.second');
          $(this).prop('disabled', true);
          $(this).css({"opacity": "0.2", "-webkit-user-select": "none"});
        }
        else {
        $('.itemList')
          .find('[data-state="' + $(this).data('state') + '"]')
          .prop('disabled', false)
          .css({"opacity": "1", "-webkit-user-select": "true"});
        $(this).remove();
        }
   });

});

Answer 6

One approach you could take is to utilize the parents selector in jQuery. In this case, if the parent of your glyphicon has a class of 'icons' and is located at position 0, you can implement the following logic:

$(document).ready(function(){

    $(".glyphicon").click(function() {
        if($(this).parents().eq(3).attr("class") == "itemList") {
          $(this).clone().appendTo('.second');
          $(this).prop('disabled', true);
          $(this).css({"opacity": "0.2", "-webkit-user-select": "none"});
        }
        else {
        $('.itemList')
          .find('[data-state="' + $(this).data('state') + '"]')
          .prop('disabled', false)
          .css({"opacity": "1", "-webkit-user-select": "true"});
        $(this).remove();
        }
   });

});

jQuery parent() Function Explained

Answer №1

Answer №2

DEMO

Answer №3

Similar questions

Substitute using JQuery

Looking for a way to retrieve JSON data from an HTML page using JavaScript? Look no further

In order to enable automatic playback of background images

WebDriver encounters difficulty clicking on a certificate error popup window

Can HTML variables be accessed in lines of code before they are declared in HTML?

How can I distinguish the search results from the while loop section at the bottom of the page?

Difficulty encountered with altering background color of table row in Firefox using CSS

Can a `react` app with `mysql` be uploaded to `github`?

Adding Font Awesome to my Angular 12 project within Visual Studio 2019

Unable to load CSS in Node.js when the parameter in Express.js is too long

Place an element in relation to the vertical size of a div that includes written content

javascript guide on converting an array into the correct JSON format

Use Javascript to toggle the display to none for a specific table row (tr)

How can data be transmitted to the client using node.js?

How can I show PHP retrieved data in separate text areas?

What is the best way to assign a unique ID to every element in this situation?

Managing multiple carousels simultaneously using the middle mouse button in Swiper.js

Style the date using moment

How can you display a doughnut chart with a custom color to represent empty or no data, including doughnut rings?

Display or conceal a vue-strap spinner within a parent or child component