I've successfully implemented a feature where clicking on buttons appends and removes li items with images in a ul parent element.
These li items are not hardcoded in the HTML, allowing users to add them in any order based on their button-click sequence. Essentially, it involves dynamically manipulating DOM elements.
$(function() {
$(".addToms").click(function () {
if ($("li").is('#tomato'))
$("li").remove('#tomato');
else
$("ul").prepend('<li class="centerUL" id="tomato"><img src="tomato.jpg"></li>');
});
});
$(function() {
$(".addLettuce").click(function () {
if ($("li").is('#lettuce'))
$("li").remove('#lettuce');
else
$("ul").prepend('<li class="centerUL" id="lettuce"><img src="lettuce.jpg"></li>');
});
});
The functionality is working smoothly.
<div class="addToms">tomato</div>
<div class="addLettuce">lettuce</div>
<ul class="centerUL">
</ul>
Now, my query pertains to overlapping these dynamically created list items with images.
I grasp the concept of z-index but assigning a static position to each li item is not feasible since I can't predict the order in which users will add them. Therefore, setting fixed or numerical values won't be effective, I assume.
If anyone can offer guidance, payment awaits!