Multiple icons created

Take a look at this fiddle.

Whenever you click the addservice icon an input box is added to the existing one(s) AND another icon is added also named rem_service.

The problem is that this rem_service icon is added whenever the add_service icon is clicked-and thus resulting in multiple identical icons.
I want the rem_service icon be added only once add_service is clicked.

How I could achieve this?

split the click handling. one click handler for adding the input .on('click', ...) and another–single one–for the image .one('click', ...) (<= note the e after .on)

you mean the same element having two separate handlers…that sounds weird.

it’s easier if you have one handler remove itself rather than jump through hoops to execute code only once.

I still do not understand how am I going to do that…from a code point of view.

$('#addser').on('click', function () {
    // add input
}).one('click', function () {
    // add icon
});

hhhm…I really did not think this code at all.In fact I did not know the one() method existed in jquery.

In fact when you wrote it I thought it was a typo…
Thanks

we have a problem though…there is specific condition that this one() must be turned off.
Take a look at this fiddle.
Go press the plus icon few times to add some input boxes to the DOM,then use the minus sign to remove them…than press again the plus to add some input boxes
**You will see the minus sign no longer appears ** and that because we set it to appear only once…it turns out though that under the conditions described above one() must cease to have it’s effect. It is useful till a point…

wouldn’t it make more sense to have both icons already created and only hide the remove icon when there is only one input?

PS. I might have seen this earlier if fiddle would have shown icons instead of «image not found» …

so you are suggesting have the icons on the DOM already?

yes.

Will do…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.