How to move up a selected row in Javascript on Chrome

I'm using javascript to move up a selected row, but when I move up, it seem can move but old row is still exist.

for example: I move up 'bbbb' row, it can move up but old row is not still removed

How to move up a selected row in Javascript on Chrome

this is my sources:

function up_move(index)
{
var frm = document.writeForm;
var opts=frm["ans_list" + index].options

for (var i=0; i<opts.length; i++) {
    if (opts[i].selected && i>0) {          
        tmp=opts[i].cloneNode(true);
        // opts[i].removeChild(true);
        opts[i].removeChild(opts[i].childNodes[0]);
        opts[i-1].insertAdjacentElement("beforeBegin",tmp).selected=true;            
    }
}

setting_val(index); 
}

<tr>
   <td><a href="#" onClick="javasript:up_move('<%=i+1%>');" style="float:left"><span class="bt_test_admin bg_type_01">▲ Up</span></a></td>
</tr>

How to fix this error? Thanks so much !

with jQuery, no need to clone and remove, you can use .insertBefore() and .insertAfter() function.

HTML:

<select size="5">
  <option>aaaa</option>
  <option>bbbb</option>
  <option>cccc</option>
  <option>dddd</option>
</select>

<button id="btn_up">up</button>
<button id="btn_down">down</button>

jQuery:

$(function() {
    $('#btn_up').on('click',function() {
        var sel = $('select option:selected');
        if (!sel.is(':first')) {
            sel.insertBefore(sel.prev());
        }
    });
    $('#btn_down').on('click',function() {
        var sel = $('select option:selected');
        if (!sel.is(':last')) {
            sel.insertAfter(sel.next());
        }
    });
});

Fiddle: https://www.bootply.com/x2cUA8SEMQ

0 Comment

NO COMMENTS

LEAVE A REPLY

Captcha image