Question

Estoy agregando campos a un formulario con jquery al agregarlo va todo bien seria el código siguiente:

Código HTML:

    <label for="">Crear Constraing</label>
    <input type=button id="agregarconstraing" value="Añadir otro">
</div>  

<div id="constraingcaja" class="cajaconstraing">

        <p>CONSTRAINT</p>
        <input type="text">
        <p>FOREIGN KEY</p> 
        (<select name="" id="">

        </select>) 
        <p>REFERENCES</p> 
        <select name="tabla" class="tablasselecionadas">
            <option value="0">Selecciona Tabla</option>

        </select>
        (<select name="" class="selectatributo">

        </select>) 
        <p>ON UPDATE</p>
        <select name="" id="">

        </select>
        <p>ON DELETE</p> 
        <select name="" id="">

        </select>

</div>

Código Jquery para agregar elementos:

var numeroconstraing = 0;

$(document).ready(function crearconstrain(){
    var constraingcaja = $('#constraingcaja');
    var numconstraing = $('#numeroconstraing')

    $('#mas').on('click', function(){
        numeroconstraing = numeroconstraing + 1;
        var constradiv = '<div  class="cajaconstraing1" id="constraintg'+numeroconstraing+'">';
        var constra1 = '<input type="text">';
        var constra2 = '(<select name="" id=""></select>)';
        var constra3 = '<select name="tabla" class="tablasselecionadas"><option value="0">Selecciona Tabla</option></select>';
        var constra4 = '(<select name="" class="selectatributo"></select>)';
        var constra5 = '<select name="" id=""></select>';
        var constra6 = '<select name="" id=""></select>';
        var constratext1 = '<p>CONSTRAINT</p>';
        var constratext2 = '<p>FOREIGN KEY</p>';
        var constratext3 = '<p>REFERENCES</p>';
        var constratext4 = '<p>ON UPDATE</p>';
        var constratext5 = '<p>ON DELETE</p>';
        var constradivfin = '</div>';

        document.getElementById("numeroconstraing1").textContent = numeroconstraing;

        var constratotal = $(constradiv+constratext1+constra1+constratext2+constra2+constratext3+constra3+constra4+constratext4+constra5+constratext5+constra6+constradivfin);
        constraingcaja.append(constratotal);

    });

});

el problema lo tengo al borrar los elementos creados anteriormente vemos en el código anterior que le estoy generando una id al elemento div (numeroconstraing) la cual se le sumaria uno cada vez que se active la función en el siguiente código es con el cual estoy intentando borrar los elementos:

$(document).ready(function borrarconstrain(){

    var constraingid = $('#constraintg'+numeroconstraing);
    //var constraingid = $('#constraintg3');

    var padre = '#constraingcaja';

    $('#menos').on('click', function(){

        $(#constraingcaja).children(constraingid).remove();

        numeroconstraing = numeroconstraing - 1;
        document.getElementById("numeroconstraing1").textContent = numeroconstraing;

    });

});

Lo e intentado con estas dos formas pero o no hace nada o me borra el contenedor padre.

$(#constraingcaja).children(constraingid).remove();
$(#constraingcaja).empty(constraingid).remove();

Answer 1

Esto debería funcionar:

$('#constraingcaja').remove(constraingid);