I was looking into removing multiple inputs and selects at once using jQuery, but I couldn't find a solution, so I ended up with the following code:$(function() {  $('a.add').click(function(evt) {    //clone lists    //is there any way to simplify this part --begin--    $('#s0 option').clone().appendTo('#s'+obj);    $('#i0 option').clone().appendTo('#i'+obj);    $('#r0 option').clone().appendTo('#r'+obj);    $('#ieu0 option').clone().appendTo('#ieu'+obj);    $('#ied0 option').clone().appendTo('#ied'+obj);    //--end--    evt.preventDefault(); //prevents scrolling  });  //remove inputs/selects  $('a.remove').click(function(evt) {    //animation is not necessary. How can I simplify this code? --begin--    $('#comp'+x).animate({opacity:hide}, slow).remove();    $('#ppt'+x).animate({opacity:hide}, slow).remove();    $('#ct'+x).animate({opacity:hide}, slow).remove();    $('#p'+x).animate({opacity:hide}, slow).remove();    $('#ipvs'+x).animate({opacity:hide}, slow).remove();    $('#s'+x).remove();    $('#i'+x).remove();    $('#r'+x).remove();    $('#ipvs'+x).remove();    $('#other'+x).remove();    //--end--  }   evt.preventDefault();  });});How can the sections marked between --begin-- and --end-- be simplified/improved?
An Add button that clones an item, and a Remove button that fades and removes an item
javascript;jquery;html;animation;dom
I would go with ChrisThompson's method of adding classes and referring to them. But to answer your question straight and simple the first block can look like $.each( ['s','i','r','ieu','ied'], function(index,item){        $('#' + item + '0 option').clone().appendTo('#' + item + obj );    });However, you did not specify what obj isThe second block can use the same technic to be simplified. The entire code would look something like this$(function() {  $('a.add').click(function(evt) {    //clone lists    //is there any way to simplify this part --begin--    $.each( ['s','i','r','ieu','ied'], function(index,item){        $('#' + item + '0 option').clons().appendTo('#' + item + obj );    });    //--end--    evt.preventDefault(); //prevents scrolling  });  //remove inputs/selects  $('a.remove').click(function(evt) {    //animation is not necessary. How can I simplify this code? --begin--    $.each( ['comp','ppt','ct','p','ipvs'], function(index,item){ $('#' + item + x).animate({opacity:hide} ,slow).remove();});    $.each(['s','i','r','other'], function(index,item){ $('#'+item+x).remove()});    //--end--    evt.preventDefault();  }   });});However, it seems to me you are using too complex HTML structure. you need to Stop using IDs, and start using classes for elements that have things in commonFor example : Instead of cloning each item, you can wrap all of the in a DIV and simple use html() to clone the entire HTML. When you inject the HTML to some other div, give the new wrapper div an ID. For example $(.my-form).append($(<div/>).addClass(.object-item).attr(id,newObject + $(.my-form .object-item).length ).html( $(.items-to-clone-wrapper).html() );You then have a unique identifier for every element on the page. for example $(#newObject1 .s) instead of $(#s1). Here is a fiddle I made on the assumptions I made about your code. I hope it will be of use to you. please let me know if there's something I can do. 