How to reposition an element using jquery

Question

I have html stuff as below:

<div class="field-group"> <label for="customfield_10102">select list</label> <select class="select" name="customfield_10102" id="customfield_10102"> <option value="-1">None</option> </select> </div> <div class="field-group"> <label for="customfield_10103">select list1</label> <select class="select" name="customfield_10103" id="customfield_10103"> <option value="-1">None</option> </select> </div> 

any number of parameters according to the setting. query:

• change the position of <select class="select" name="customfield_10103" id="customfield_10103"> by adding <select class="select" name="customfield_10102" id="customfield_10102"> (with an edge of 40 pixels), and also change the width of the selection list.

• After that, delete <div class="field-group"><label for="customfield_10103">select list1</label></div>

Can anyone suggest me how I could do this using JQUERY?

NOTE. For reference, I need such a setting in a custom JIRA field that can be achieved using jquery.

Another related request:

The following is the HTML material:

 <li id="rowForcustomfield_10102" class="item"> <div class="wrap"> <strong title="select list" class="name">select list:</strong> <div id="customfield_10102-val" class="value type-select editable-field inactive" data-fieldtype="select" title="Click to edit"> final2 <span class="overlay-icon icon icon-edit-sml" /> </div> </div> </li> <li id="rowForcustomfield_10103" class="item"> <div class="wrap"> <strong title="select list1" class="name">select list1:</strong> <div id="customfield_10103-val" class="value type-select editable-field inactive" data-fieldtype="select" title="Click to edit"> 1 <span class="overlay-icon icon icon-edit-sml" /> </div> </div> </li> 

I want to remove "rowForcustomfield_10103" and it just contains the element "customfield_10103-val" next to "customfield_10102-val" with some margin. so after that it will look like this:

 `<li id="Li1" class="item"> <div class="wrap"> <strong title="select list" class="name">select list:</strong> <div id="Div1" class="value type-select editable-field inactive" data-fieldtype="select" title="Click to edit"> final2 <span class="overlay-icon icon icon-edit-sml" /> </div> <div id="Div2" class="value type-select editable-field inactive" data-fieldtype="select" title="Click to edit"> 1 <span class="overlay-icon icon icon-edit-sml" /> </div> </div> </li>` 

Please let me know about this.

tried, but could not change position:

 if(AJS.$("rowForcustomfield_10102").length > 0) { AJS.$("customfield_10102-val").after( AJS.$('customfield_10103-val')); AJS.$('customfield_10103-val').css({ 'margin-left': '40px','width':'80px' }) AJS.$('customfield_10102-val').css({ 'width': '80px' }); AJS.$("#rowForcustomfield_10102 .name").html(null); AJS.$("#rowForcustomfield_10103 .name").html(null); } 

Answer 1

try it

  $("#customfield_10102").after($('#customfield_10103')); $('#customfield_10103').css({ 'margin-left': '40px','width':'200px' }) $('#customfield_10102').css({ 'width': '200px' }); $('[for="customfield_10103"]').closest('.field-group').remove(); 

Answer 2

Here is one approach:

 var $customfield_10103 = $('#customfield_10103'), $parent = $customfield_10103.parent(); $customfield_10103.appendTo($('#customfield_10102').parent()).css('marginLeft', '40px'); $parent.remove(); 

Fiddle