Tengo unos cuadros de lista que incluyen checkboxes. Cuando se marcan, los cuadros son eliminados si se hace clic al botón Eliminar.
A su vez, existe un campo de texto "Agregar" donde se añaden nuevos elementos separados por comas al hacer clic en "Actualizar".
Lo que quiero es que los cuadros existentes no incluyan checkboxes, sólo los nuevos que se agreguen.
Actualmente tengo configurado click() para que vacíe el contenedor y lo reemplace por los elementos que dicta el append() en el bucle. Sé que éste es el problema pero no tengo ni idea de cómo hacer que los elementos existentes se conserven tal cual. Si alguien me puede echar una mano se agradece.
Aquí dejo lo que se ha hecho hasta ahora (puede pegarse directamente):
Código Javascript
:
Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prueba Sortable</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
body {font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; coloer: #444}
#sortable { list-style-type: none; margin: 0; padding: 0; width: 700px; }
#sortable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
.input {width: 600px; padding: 3px; font-family: Lucida Console; font-size: 12px; color: #444; }
.demo-description {clear: both;}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
function interseccion( texto1 , texto2 ) {
array1 = texto1.split(",");
$.each(texto2.split(",") , function (ind , valor) {
if (array1.indexOf(valor) == -1)
array1.push(valor);
});
return array1;
}
$("#wpsi_res_submit").click(function() {
$( "#sortable" ).empty();
var valor2 = '';
var inter = interseccion($("#wpsi_res_img1").val() , $("#wpsi_res_img2").val());
for (i = 0; i < inter.length; i++) {
$( "#sortable" ).append('<li class="ui-state-default" id="li-' + inter[i] + '">' + inter[i] + ' <input type="checkbox" class="check" id="eliminar-' + inter[i] + '" /><\/li>');
valor2 += inter[i];
if (i < inter.length - 1) {
valor2 += ',';
}
}
$('#wpsi_res_img1').val(valor2);
$('#wpsi_res_img2').val('');
});
$("#sortable").sortable({
update: function() {
var wpsi_pos = [];
$('#sortable > li').each(function(i) {
wpsi_pos[i] = $(this).attr('id').replace('li-' , '');
});
$('#wpsi_res_img1').val(wpsi_pos.toString());
}
});
$("#wpsi_res_delete").click(function () {
$('.check:checked').parent().empty().remove();
var wpsi_pos2 = [];
$('#sortable > li').each(function(i) {
wpsi_pos2[i] = $(this).attr('id').replace('li-' , '');
});
$('#wpsi_res_img1').val(wpsi_pos2.toString());
});
});
</script>
</head>
<body>
<div class="demo-description">
<p>Orden de lista: <input type="text" name="wpsi-res-img1" id="wpsi_res_img1" class="input" value="1,2,3,4,5,6,7,8,9,10,11,12" /></p>
<p>Agregar: <input type="text" name="wpsi-res-img2" id="wpsi_res_img2" class="input" /></p>
<p><input type="submit" name="wpsi-res-submit" id="wpsi_res_submit" value="Actualizar" /></p>
<p><input type="submit" name="wpsi-res-delete" id="wpsi_res_delete" value="Eliminar cuadro" /></p>
</div>
<div class="demo">
<ul id="sortable">
<li class="ui-state-default" id="li-1">1</li>
<li class="ui-state-default" id="li-2">2</li>
<li class="ui-state-default" id="li-3">3</li>
<li class="ui-state-default" id="li-4">4</li>
<li class="ui-state-default" id="li-5">5</li>
<li class="ui-state-default" id="li-6">6</li>
<li class="ui-state-default" id="li-7">7</li>
<li class="ui-state-default" id="li-8">8</li>
<li class="ui-state-default" id="li-9">9</li>
<li class="ui-state-default" id="li-10">10</li>
<li class="ui-state-default" id="li-11">11</li>
<li class="ui-state-default" id="li-12">12</li>
</ul>
</div>
</body>
</html>