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:
<body> <div class="foodcourt"> <div class="container"> <header> </header> <section class="maincircle"> <ul class="ch-grid"> <li> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-1"></div> <div class="ch-info-back"> <h3>Pizza</h3> <p>Price: ₹100</p> </div> </div> </div> </li> </section> <div class="menucard"> <ul id="list"> </ul> </div> </div> </div>
Advertisement
Answer
Working Fiddle
Your HTML:
<div class="foodcourt"> <div class="container"> <section class="maincircle"> <ul class="ch-grid"> <li> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-1"> <img src="http://www.belfast-takeaways.co.uk/img/pizza.jpg" /> </div> <div class="ch-info-back"> <h3>Pizza</h3> <p>Price: ₹100</p> </div> </div> </div> </li> </ul> </section> <div class="menucard"> <ul id="list"></ul> </div> </div> </div>
Some jQuery:
$(".ch-img-1").live("click", function () { var newLi = $('.ch-info .ch-info-back h3').text(); if ($("#list li:contains(" + newLi + ")").length) { $($("#list li:contains(" + newLi + ")")).remove(); } else { $('.menucard #list').append('<li>' + newLi + '</li>'); } });
Voila!