jimfog Posted January 3, 2013 Share Posted January 3, 2013 (edited) I have a form where the user is given the option(by pressing a plus button)to add some inputs to it. All these newly created inputs have the same ID, which is #servc and $price.So upon clicking the plus button we get 2 inputs. I am also adding a minus button to remove the inputs added-if he wishes to do so. This is the code to remove the inputs: if($('#servc').index()==11) {var test=$('#servc').index(); alert(test); $('#servc').remove(); $('#price').remove(); } The code works as I want but there is something that does not make sense.I noticed that in order to remove the input elements EXCEPT the last one which will be either way I must aiman index of 11-but how can that be?Even the second input has index of 11 while it should have index of 1 as the count begins from 0 In fact all inputs except the first have index of 11-I use alert to get info about the index as you see aboveUnless I miss something here...SO the problem centers around as to why the index is 11 and not 1 or 2 or 3...depending on which input element weare targeting. Of course an index of 3 will be there only if we have 4 inputs. I think that somehow...placing the two inputs side by side(#price and #servc) somehow spoils the index calculation... Edited January 3, 2013 by jimfog Link to comment Share on other sites More sharing options...
Ingolme Posted January 3, 2013 Share Posted January 3, 2013 An ID should only be used on one element of the document. I don't know how jQuery will behave if more than one element has the same ID, you should use a class name. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 3, 2013 Share Posted January 3, 2013 index() does not refer to specific number of inputs with id ref (which is still invalid as mentioned before) of 'servc', it refers to its position from within the whole page counting any inputs found before it. Using a id ref, it will find the first and stop and that will be the index reference it will return. see example below see how the class function works but only the first of multiple id ref works, the rest are ignored. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(function(){$('#address').focus(function(){alert($(this).index())});$('.address').focus(function(){alert($(this).index())});});/*--*//*]]>*/</script><style type="text/css"></style></head><body><div id="form"> <input id="phone" size="40" placeholder="Phone" type="text" name="Phone" /> <input class="address" size="40" placeholder="Address" type="text" name="Address" /><input class="address" size="40" placeholder="Address" type="text" name="Address" /><input class="address" size="40" placeholder="Address" type="text" name="Address" /> <input id="address" size="40" placeholder="Address" type="text" name="Address" /><input id="address" size="40" placeholder="Address" type="text" name="Address" /><input id="address" size="40" placeholder="Address" type="text" name="Address" /> <input id="service" size="40" placeholder="Service" type="text" name="Service" /> <input id="price" display="block" size="3" placeholder="Price" type="text" name="Price" /></div></body></body></html> Link to comment Share on other sites More sharing options...
jimfog Posted January 4, 2013 Author Share Posted January 4, 2013 Ok I got your point...here is what I have achieved so far-by taking into consideration the lateset post.First,here is the code: $("#rem_service").click(function()//να μάθω γιατί αυτή η function πρέπει να εσωκλειστεί μέσα στην $("#addsrvice").click(function() για να λειτουργήσει { if($('.servc').index()>0) { var test=$('.servc').index(); alert(test); $('.servc').remove(); $('.price').remove(); } }); The alert method is just for testing there.Now, the inputs are removed by clicking the remove button(#rem_service) but: All of them are removed-while I want one of them to be preserved. And all of them are removed by a single click, while I wand a single one removed with each clickI I do not think it is something difficult. HTML: <div id="form"> <form style="" action="profile.php" method="post"> <input size="40" placeholder="Διεύθυνση" type="text" name="address"><br> <input size="40" placeholder="Περιοχή" type="text" name="area"><br> <input size="40" placeholder="Πόλη" type="text" name="city"><br> <input size="40" placeholder="Νομός" type="text" name="municipality"><br> <input size="40" placeholder="Σταθερό Τηλέφωνο" type="text" name="Phone"><br> <input size="40" placeholder="Κινητό Τηλέφωνο" type="text" name="Phone"><br> <input class="servc" size="40" placeholder="Υπηρεσία" type="text" name="services"> <input class="price" size="3" placeholder="Τιμή" type="text" name="price"> <div id="buttons"> <div id="addsrvice"> <img align="center" src="Images/add_service.png"> </div> </div> <br> <input value="Αποθήκευση" name="submit" type="submit" /> </form> Ignore the Greek words.You will understand what each input is from the name attribute. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 4, 2013 Share Posted January 4, 2013 Right! first of, we, i kept telling you multiple identical id ref would cause problems thereforeIF a id ref IS really required for these inputs, for each input you append use a counter to give each a different id ref, but it may cause difficultly in removing all the inputs as you have to reference each individual id ref, but! since we know classes work, why not use a ref to class to remove, use remove() along with not(), with eq(), and size(), size() use to find how many input with specific class exist.eq() use to remove last input determined by size -1 if greater than 0. Yes does seem simple, therefore why are you making so difficult. Link to comment Share on other sites More sharing options...
jeffman Posted January 4, 2013 Share Posted January 4, 2013 Or if you just want one removed, add first() or last() to your class selector? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 4, 2013 Share Posted January 4, 2013 if($('.servc').index()>0) Considering what i just pointed out, that the index code you use returns its index position within the WHOLE page of inputs and other elements, unless .servc is at the very top of pagethis condition will always be true. check out http://api.jquery.com/index/ on how it is used. Link to comment Share on other sites More sharing options...
jimfog Posted January 4, 2013 Author Share Posted January 4, 2013 Right! first of, we, i kept telling you multiple identical id ref would cause problems thereforeIF a id ref IS really required for these inputs, for each input you append use a counter to give each a different id ref, but it may cause difficultly in removing all the inputs as you have to reference each individual id ref, but! since we know classes work, why not use a ref to class to remove, use remove() along with not(), with eq(), and size(), size() use to find how many input with specific class exist.eq() use to remove last input determined by size -1 if greater than 0. Yes does seem simple, therefore why are you making so difficult. I just want to say I am fully aware that I cannot use similar IDs.I am going to use classes instead and the methods you propose for solvingthe problem(remove, size, eq), I am going to use these and proceed accordingly.If I encounter problems I will say so... It is easy yes, but for the experienced js developer...and I am not one of them. Link to comment Share on other sites More sharing options...
jimfog Posted January 6, 2013 Author Share Posted January 6, 2013 if($('.servc').index()>0) Considering what i just pointed out, that the index code you use returns its index position within the WHOLE page of inputs and other elements, unless .servc is at the very top of page this condition will always be true. check out http://api.jquery.com/index/ on how it is used. I just read the jquery manual regarding the index method. It is one example I do not understand. In particular in one example I expected the index to be 0 but it is 1.Go in this example here: Example: Returns the index for the first item in the jQuery collection Since the first list item is targeted why the index is 1, I think it should be 0. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 6, 2013 Share Posted January 6, 2013 var listItems = $('li:gt(0)'); greater than index 0 Link to comment Share on other sites More sharing options...
jimfog Posted January 6, 2013 Author Share Posted January 6, 2013 (edited) still do not get it... just a second, let me give it another look Now I got it... Edited January 6, 2013 by jimfog Link to comment Share on other sites More sharing options...
dsonesuk Posted January 6, 2013 Share Posted January 6, 2013 (edited) $('li:gt(0)'); look at list Item that it greater than 0 (the first) so look at second (1) $('li').index(listItems) is look through list items and return index value as set out by listItems, not the first (0), greater than first (1) = index = 1 remove last two list items, it will return -1 (not found), meaning no more than one list item exists. Edited January 6, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now