Javascript to check if div has child with that classname

Question

So,

How to check with JavaScript if DIV has that classname? Here's an example HTML <div class="cart"></div> that would be the parent and then JavaScript creates under that div's upon a click, but if it's already there and you click the item then it's just going to remove it. Example: Button is yellow and if you click it, it add's item to the cart and changes button class to selected. If you click it again, it will remove selected class and also remove item from the cart. I do have a code for the clicking part and adding it to cart, but not for removing it.. How could I do it?

JavaScript

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

Here it adds the item to the cart, but if you would reclick it, it will do it again. I've tried write a function, which checks that is the item already in cart, if it is then remove it, if not then add it, but I never succeed. I think that would solve my problem though.

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Apr 26 '16 at 09:05
Possible duplicate of [Determine if an element has a CSS class with jQuery](http://stackoverflow.com/questions/263232/determine-if-an-element-has-a-css-class-with-jquery) — JJJ, Apr 26 '16 at 09:15

madalinivascu · Accepted Answer · 2016-04-26T09:32:07.057

1

try the following:

   $(".item-card").click(function() {
  var itemnume = $(this).find("img").attr("title");
  var replaced = itemnume.split(' ').join('_');

  if ($(this).hasClass('selected-item')) {
    console.log()
    $("#" + replaced).remove();
  } else {
    $("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
  }
  $(this).toggleClass("selected-item");
});

https://jsfiddle.net/0tusd19b/

edited Apr 26 '16 at 09:32

answered Apr 26 '16 at 09:13

madalinivascu

32,064
4
39
55

Thank You! Sadly it didn't work out though. :( It doesn't want to remove div id called by that name. Here's how it looks after he created it `
The Best Ball
` – Olaf Mudj Apr 26 '16 at 09:22
it works you have invalid ids that is why is not working for you – madalinivascu Apr 26 '16 at 09:23
If I click it, then it goes selected item, but it doesn't add item right away. if I click again then it adds it. – Olaf Mudj Apr 26 '16 at 09:23
How I got invalid ids? – Olaf Mudj Apr 26 '16 at 09:24
I edited a bit that part, I added that spaces replaced with +, because it wouldn't work at all then :/ – Olaf Mudj Apr 26 '16 at 09:24
how did you added +? – madalinivascu Apr 26 '16 at 09:25
`var replaced = itemnume.split(' ').join('+');` – Olaf Mudj Apr 26 '16 at 09:26
Chrome console: Uncaught Error: Syntax error, unrecognized expression: #The+Best+Ball – Olaf Mudj Apr 26 '16 at 09:31
that is a invalid id – madalinivascu Apr 26 '16 at 09:33
see updated answer – madalinivascu Apr 26 '16 at 09:40
It adds to cart, but can't remove because of syntax error. #The_Best_Ball – Olaf Mudj Apr 26 '16 at 09:59
are you using strict mode? – madalinivascu Apr 26 '16 at 10:01
It would remove it, but it can't find the #itemname. It can be because, it is not searching it under the #itemname, it is searching it under item-selected? – Olaf Mudj Apr 26 '16 at 10:09
i tested the code in the jsfiddle attached and it works – madalinivascu Apr 26 '16 at 10:09
Hmm, I think I got a different code a bit lol. Okay so.. – Olaf Mudj Apr 26 '16 at 10:14
Items are shown as "item-cards". (JavaScript creates card for each item), but if I look the code then you search it from there (if item is there, then remove it), but it should search it from #itemcart or am I understanding it wrong? – Olaf Mudj Apr 26 '16 at 10:15
ids should be unique .the syntax i am using will search in all the dom for that element – madalinivascu Apr 26 '16 at 10:23
hmm I dont get it why it doesnt work lol :D – Olaf Mudj Apr 26 '16 at 10:30
Doesn't make any sense :/ – Olaf Mudj Apr 26 '16 at 10:30
as you can see my jsfiddle is working, you may have other errors in your page – madalinivascu Apr 26 '16 at 10:31
Nope, I don't see any other. Error log doesn't show any, you don't know any other reason why it couldn't find it? – Olaf Mudj Apr 26 '16 at 10:37
http://prntscr.com/ax0351 maybe it helps, I think it is 100% my fault I didn't said it earlier maybe if it matters :D – Olaf Mudj Apr 26 '16 at 10:41
javascipt doesn't have error logs it has console errors,your prtscr doesn't help – madalinivascu Apr 26 '16 at 10:46
Thought it will, but okay. hmm, I don't get it then how it can't fint it :D – Olaf Mudj Apr 26 '16 at 10:48
Took code from my prntscr added it to the jsfiddle, works there but not on mine.. what the hell.. – Olaf Mudj Apr 26 '16 at 10:57
what can't you find? – madalinivascu Apr 26 '16 at 10:59
from a scale from 1 to 10 how good are you with javascript? – madalinivascu Apr 26 '16 at 11:00
not best lol like you can see.. can't even solve that easy problem.. – Olaf Mudj Apr 26 '16 at 11:02
Hmm, I got some items with (), and it then works. I will do script to remove (), but still it doesn't remove items though. Choosed item without (). Added it there clicked again, didn't "removed" it :/ – Olaf Mudj Apr 26 '16 at 11:10
Alright, found out that if you use append, then to remove it you have to use somekind of .on function. Have to see though how to use it, that's why remove doesn't work. – Olaf Mudj Apr 26 '16 at 11:14
this code should work provided the ids are valid and unique – madalinivascu Apr 26 '16 at 11:23
idk, if I readed it right then have to use somehow that part. I got it working, but it was removing wrong thing lol.. Have to put it to right place – Olaf Mudj Apr 26 '16 at 11:27
good to know, please accept the answer if it's the right one – madalinivascu Apr 26 '16 at 11:29
I'll try to get it working, then I'll accept your answer :). – Olaf Mudj Apr 26 '16 at 11:30
can you provide a jsfiddle with your error? – madalinivascu Apr 26 '16 at 11:35
Not getting any error atm, trying to figure out where I should bind click event so if you click again it will remove. – Olaf Mudj Apr 26 '16 at 11:38
the code above does that – madalinivascu Apr 26 '16 at 11:39
Idk, it wont remove the div for me on site – Olaf Mudj Apr 26 '16 at 11:40
do you have console erors when you click to remove it? – madalinivascu Apr 26 '16 at 11:43
I am complete retarded. I think I should learn how to copy paste lol – Olaf Mudj Apr 26 '16 at 11:46

Javascript to check if div has child with that classname

1 Answers1