Dynamic form element deletion using jQuery

Posted on 2009-12-16
Last Modified: 2012-08-14
I have a dynamic form using jQuery. Rows are created based on the values from drop down(please check image) . Each row is created with a <p> tag and unique id. If I delete a row in between the id appended to all those rows after the deleted row should be decremented by 1.
For ex: if we have 1 to 10 rows each row identified as 1,2,3, .....10. If I delete 5th row then there should be no 10th row and series would be 1,2,3....9.
The values of all the remaining rows should be preserved.  How can I do this using jQuery?
Question by:Web_Sight
    LVL 12

    Expert Comment

    Write a loop on delete that reduces the id of all the <p> if it is a number greated than the id of the deleted row. Here is an easy function to test if you are looking at the right p tags and to avoid any errors, .
     Get the element id on delete.Your loop will be on row delete and checks all the p tag ids. Then write an if statement in the loop to see if the ids are greater than what was deleted, if so, reduce the id by one, otherwise skip it.

    Author Comment

    Thanks for your comment.
    Still, how can I change the element id. Is there any function to change element id?
    LVL 42

    Expert Comment

    by:David S.
    In jQuery you'd use the attr() method:

    Try the following code.

    P.S. Is there a particular reason why you chose to use <p>s?
    $('#parentId p').attr('id',function(idx){ 
      // change "parentId" and "idPrefix" as needed
      return 'idPrefix'+(idx+1);  // because indexes start at 0 and IDs start at 1

    Open in new window


    Author Comment

    Thanks for your valuable comments.
    Now I can rename id and attribute.But how can rename event functions with paramenter.
    The code I used is
    <input name="delRul_2" id="delRul_2" value="Delete" onclick="deleteRule(3);" type="button">
    I like to decrement the parameter 3 as 2 while deleting a row.
    LVL 42

    Accepted Solution

    My advice would be to not use inline event handlers at all.

    I would place an onclick handler on the common parent and let it extract the number from the ID of the clicked button.
      if((el.nodeName.toLowerCase()=='input') && ('delRul_')==0)) {
         var which =;  // we use 7 here because 'delRul_' is 7 characters
         // add code to delete the "row" here

    Open in new window


    Author Comment

    I am working on this solution. I will surely get back to you
    thanks again Kravimir

    Author Closing Comment

    Thanks Kravimir ....the solution you gave pointed me to the right direction but it was not enough to reach the destination..:)

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We o…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
    Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now