funcion remove() con DIV no funciona si el elemento se ha añadido desde jquery
Publicado por zenit (3 intervenciones) el 20/03/2016 01:22:09
Buenas...
A ver si me podeis ayudar pq el tema me esta volviendo loco.. resulta q tengo el siguiente codigo..
HTML ----------
JQUERY ---------
PROBLEMA ----
Como podeis comprobar es un panel donde tengo ya insertado varios campos. la funcion añadir me funciona correctamente y la de borrar tb excepto para aquells campos que son añadidos. ¿se os ocurre que esta pasando?
Un saludo
A ver si me podeis ayudar pq el tema me esta volviendo loco.. resulta q tengo el siguiente codigo..
HTML ----------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="panel-body" id="pannel-words">
<div class="row">
<div class="col-md-4 col-md-offset-2"><input class='form-control' type="text" value="Perro"></div><span class="glyphicon glyphicon-remove remove"></span>
<div class="col-md-4"><input class='form-control' type="text" id="2" value="Dog"></div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2"><input class='form-control' type="text" value="Vaca"></div><span class="glyphicon glyphicon-remove remove"></span>
<div class="col-md-4"><input class='form-control' type="text" id="3" value="Cow"></div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2"><input class='form-control' type="text" value="Caballo"></div><span class="glyphicon glyphicon-remove remove"></span>
<div class="col-md-4"><input class='form-control' type="text" id="4" value="Horse"></div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-4 col-md-offset-2"><input id="spanish" class='form-control' type="text" value=""></div>
<div class="col-md-4"><input id="english" class='form-control' type="text" value=""></div>
</div>
<div class="row margin-top">
<div class="col-md-3 col-md-offset-3">
<button type="button" id="btn-add" class="btn btn-success btn-sm btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Word
</button>
</div>
<div class="col-md-3">
<button type="button" id="btn-save" class="btn btn-info btn-sm btn-block">
<span class="glyphicon glyphicon-floppy-disk"></span> Save List
</button>
</div>
</div>
JQUERY ---------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
$(".remove").click(function(){
$(this).parent().remove();
}) ;
$('.remove').click(function() {
$(this).parent('.remove').remove();
});
$("#btn-add").click(function(){
$("#pannel-words").append( "<div class='row'><div class='col-md-4 col-md-offset-2'><input class='form-control' type='text' value='" + $("#spanish").val() + "'></div><span class='glyphicon glyphicon-remove remove'></span><div class='col-md-4'><input class='form-control' type='text' value='" + $("#english").val() + "'></div></div>");
$("#spanish").val("");
$("#english").val("");
}) ;
</script>
PROBLEMA ----
Como podeis comprobar es un panel donde tengo ya insertado varios campos. la funcion añadir me funciona correctamente y la de borrar tb excepto para aquells campos que son añadidos. ¿se os ocurre que esta pasando?
Un saludo
Valora esta pregunta
0
