Agregar múltiples cuadros de texto usando jquery

Html

<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"><a href="javascript:void(0);" class="add" ><span class="glyphicon glyphicon-plus"></span></a></div>
<div class="contents"></div>
</div>

Y guión como

<script>
$(document).ready(function() {
$(".add").click(function() {
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(".contents");
});
});
</script>

La consulta anterior se usa para agregar varios cuadros de texto que funcionan correctamente y trato de eliminar los elementos agregados en el botón Eliminar, pero que solo eliminan un cuadro de texto solo estoy usando este script

<script>
$('.contents').on('click', '.rem', function() {
$(this).parent("div").remove();
});
</script>

¿Hay alguna forma de eliminar solo la fila completa en la que se hizo clic? ingrese la descripción de la imagen aquí

0
Shambu 30 oct. 2017 a las 13:18

3 respuestas

La mejor respuesta

Respuesta actualizada: Use prevUntil () para lograr esto:

$('.contents').on('click', '.rem', function() {
    $(this).parent().prevUntil(".col-md-1").remove();
    $(this).parent().remove();
});

$(document).ready(function() {
    $(".add").click(function() {
        $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
        $('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
        $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
        $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
        $('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span><hr></div>').appendTo(".contents");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
    <div class="col-md-3"><label>Name</label><input type="text" class="form-control" name="" /></div>
    <div class="col-md-2"><label>Count</label><input type="text" class="form-control" name="" /></div>
    <div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name="" /></div>
    <div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name="" /></div>
    <div class="col-md-1" style="margin-top:30px;">
        <a href="javascript:void(0);" class="add"><span class="glyphicon glyphicon-plus">Add this</span></a>
    </div>
    <div class="contents"></div>
</div>
0
SilverSurfer 30 oct. 2017 a las 11:17

El padre debe ser abuelo, intente debajo del código

replace $(this).parent("div").remove(); 

Con

$(this).parent().parent().remove();

Entonces el código final es:

<script>
$('.contents').on('click', '.rem', function() {
$(this).parent().parent().remove();
});
</script>
0
Vinod Selvin 30 oct. 2017 a las 10:21

Puedes reescribir código como este. Estás eliminando el contenedor, ese era el problema

   

 $(document).ready(function() {
    $(".add").click(function() {
    var container= $('<div>');
    $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
    $('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(container);
    $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
    $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
    $('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(container);
    $('.childControl').after($(container).clone());
    });
    $('.contents').on('click', '.rem', function() {
    $(this).parent("div").parent("div").empty();
    });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"><a href="javascript:void(0);" class="add" ><span class="glyphicon glyphicon-plus"></span>Add</a></div>
<div class="contents"><div class="childControl"></div>
</div>
3
Sandeep 30 oct. 2017 a las 11:24