I want this operations using jQuery. On image click The item should add to the menu. Suppose I click on pizza image the it should add new li in ul with name pizza. When I again click on image 1 that pizza should be gone. This is code:
JavaScript
x
28
28
1
<body>
2
<div class="foodcourt">
3
<div class="container">
4
<header>
5
6
</header>
7
<section class="maincircle">
8
9
<ul class="ch-grid">
10
<li>
11
<div class="ch-item">
12
<div class="ch-info">
13
<div class="ch-info-front ch-img-1"></div>
14
<div class="ch-info-back">
15
<h3>Pizza</h3>
16
<p>Price: ₹100</p>
17
</div>
18
</div>
19
</div>
20
</li>
21
</section>
22
<div class="menucard">
23
<ul id="list">
24
</ul>
25
</div>
26
</div>
27
</div>
28
Advertisement
Answer
Working Fiddle
Your HTML:
JavaScript
1
26
26
1
<div class="foodcourt">
2
<div class="container">
3
<section class="maincircle">
4
<ul class="ch-grid">
5
<li>
6
<div class="ch-item">
7
<div class="ch-info">
8
<div class="ch-info-front ch-img-1">
9
<img src="http://www.belfast-takeaways.co.uk/img/pizza.jpg" />
10
</div>
11
<div class="ch-info-back">
12
<h3>Pizza</h3>
13
14
<p>Price: ₹100</p>
15
</div>
16
</div>
17
</div>
18
</li>
19
</ul>
20
</section>
21
<div class="menucard">
22
<ul id="list"></ul>
23
</div>
24
</div>
25
</div>
26
Some jQuery:
JavaScript
1
9
1
$(".ch-img-1").live("click", function () {
2
var newLi = $('.ch-info .ch-info-back h3').text();
3
if ($("#list li:contains(" + newLi + ")").length) {
4
$($("#list li:contains(" + newLi + ")")).remove();
5
} else {
6
$('.menucard #list').append('<li>' + newLi + '</li>');
7
}
8
});
9
Voila!