Checking if a div element contains a child with a specific class name using JavaScript

Question

Checking if a div element contains a child with a specific class name using JavaScript

Okay, so here's the dilemma:

Is there a way to use JavaScript to determine if a DIV has a specific classname? For instance, consider this sample HTML

<div class="cart"></div>

. This DIV would act as the parent, and JavaScript would dynamically create child divs underneath it upon clicking. However, if a child div is already present and you click on the item, it should be removed. For example, imagine a button that turns yellow when clicked, adding an item to the cart and changing the button's class to "selected." Clicking the button again should remove the selected class and eliminate the item from the cart. I have code for adding items to the cart, but I'm struggling with removing them. Any suggestions?

JavaScript

    $(".item-card").mousedown(function() {
        $(this).toggleClass("selected-item");
        var itemName = $(this).find("img").attr("title");
        $("#itemcart").append($("<div id="+itemName+">"+itemName+"</div>"));
    });

Currently, clicking repeatedly adds the item to the cart multiple times. I've attempted to create a function that checks if the item is already in the cart, removes it if present, and adds it if not. However, I haven't been successful in implementing this. I believe addressing this issue would resolve my problem.

javascript jquery html css

Answer 1

Answer №1

Here is a helpful suggestion:

   $(".clickable-item").click(function() {
  var itemName = $(this).find("img").attr("title");
  var modifiedName = itemName.split(' ').join('_');

  if ($(this).hasClass('selected')) {
    console.log()
    $("#" + modifiedName).remove();
  } else {
    $("#cart").append($("<div id=" + modifiedName + ">" + itemName + "</div>"));
  }
  $(this).toggleClass("selected");
});

https://jsfiddle.net/1a2b3c4d/

Answer 2

Here is a helpful suggestion:

   $(".clickable-item").click(function() {
  var itemName = $(this).find("img").attr("title");
  var modifiedName = itemName.split(' ').join('_');

  if ($(this).hasClass('selected')) {
    console.log()
    $("#" + modifiedName).remove();
  } else {
    $("#cart").append($("<div id=" + modifiedName + ">" + itemName + "</div>"));
  }
  $(this).toggleClass("selected");
});

https://jsfiddle.net/1a2b3c4d/

Checking if a div element contains a child with a specific class name using JavaScript

Answer №1

Similar questions

Navigating through the features of www.addthis.com is simple and straightforward

Ensuring scope safety in jQuery AJAX requests

Using location.reload with the argument of true is no longer recommended

Tips for changing the color of shapes when hovering over an image state

Encountering difficulties with updating customer information in postgreSQL

Internet Explorer 9 crashing when using a jQuery file change event

Access to the Express Node.js server is restricted to the machine that is currently hosting the server

Displaying a verification button prior to sending out the form

Deliver search findings that are determined by matching criteria, rather than by identification numbers

Error: The function jQuery(...).hexColorPicker does not exist

Collapse all "Read More" buttons simultaneously using Bootstrap

Ensure that the ng-view element has a height of 100% and

Can you explain the differentiating factors of a document and the DOM?

I encountered a CORS policy error while using React. What steps can I take to effectively manage and resolve this

Tips for connecting to multiple items in an md-select element from within a directive

Displaying jQuery AJAX response through the use of a PHP script as a middle

What is the best way to extract row data from a datatable and transmit it in JSON format?

The required element was not discovered

Is there a way to use Media Queries to require CSS to load an image?

Unable to trigger JQuery .blur event