tengo dos listas una de productos a seleccionar y la otra de productos seleccionados quiero poder devolver el producto seleccionado a su lugar original.
Lo resuelvo un poco en el siguiente formato, pero el problema es que podría haber cientos de productos
$(document).on('click', "#remove_product", function () { var product = $(this).parents("li"), found = false; $('.products_list li').each(function() { if(this.id > product.attr('id') && !found ){ product.clone().insertBefore(this); found = true; } }); if(!found) product.clone().append(".products_list"); product.remove(); }) .products_list button{ display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="products_list"> <li id="1">Content 1</li> <li id="2">Content 2</li> <li id="4">Content 4</li> <li id="5">Content 5</li> </ul> <hr> <ul class="selected_products"> <li id="3"> Content 3 <button id="remove_product">remove product</button> </li> </ul>¿Alguna solución mejor?
La forma más sencilla de lograr su objetivo sería crear una función que clasifique los elementos li dentro de ul en función de su id . A continuación, puede llamar a esta función siempre que se realice una actualización en li .
La función también se puede hacer lo suficientemente genérica para que funcione para ambos contenedores ul , al agregar/eliminar un elemento de cada uno.
Tenga en cuenta en el siguiente ejemplo que agregué el elemento de button a cada li de forma predeterminada, según su patrón de ocultarlos a través de CSS para la lista inicial. También cambié la id en el botón a una class , ya que la id debe ser única.
Dicho esto, prueba esto:
let $productsList = $('.products_list'); let $selectedList = $('.selected_products'); let sortProductsInContainer = $container => $container.find('li').sort((a, b) => a.id > b.id ? 1 : -1).appendTo($container); // add product to selected list $productsList.on('click', 'li', e => { $(e.target).closest('li').appendTo($selectedList); sortProductsInContainer($selectedList); }); // remove product from selected list $selectedList.on('click', ".remove_product", e => { $(e.target).closest("li").appendTo($productsList); sortProductsInContainer($productsList); }) .products_list button { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="products_list"> <li id="1">Content 1 <button class="remove_product">remove product</button></li> <li id="2">Content 2 <button class="remove_product">remove product</button></li> <li id="4">Content 4 <button class="remove_product">remove product</button></li> <li id="5">Content 5 <button class="remove_product">remove product</button></li> </ul> <hr> <ul class="selected_products"> <li id="3">Content 3 <button class="remove_product">remove product</button></li> </ul>