deleting wrong div onclick JS

Question

i am developing a form where you should be able to generate dynamically textfields based on a button and delete if necessary, the wrong thing thing starts when i try to delete the whole DIV element i cloned but instead it only deletes the delete button and the textbox stays there and can't be deleted since the div containing the delete button is the one is deleted, the delete button is in the same div as the textbox, before i forget i am doing all of this using bootstrap 4 so i can't use classes for references as i have seen in some examples, i'll write the codeso you can see what i could be doing wrong

HTML CODE

    <div class="form-group" name="CamposTexto" id="CamposTexto">  //whole div i desire to clone
            <label class="col-sm-2 control-label" id="label_situacion_actual">Situación Actual:<a id="contador"></a></label>
        <div class="col-sm-8">
                    <textarea id="situacion_permiso_precario" name="situacion_permiso_precario" 
                    class="form-control input-sm" style="resize:none;height:60px;text-transform:uppercase;" 
                    maxlength="500" onKeyPress="return SoloNumeros(event);"></textarea>
                </div>
                    <div id="quitarCampoDeTexto" name="quitarCampoDeTexto"> //this is the div that disappears when i press the X to delete, only happens when i cloned the div
                        <button type="button" onClick="quitarCampoDeTexto(this);" class="btn btn-danger glyphicon glyphicon-remove"></button>
                    </div>
        </div>
                <div id="AgregarCampos" class="form-group" style="margin-bottom:10px;"></div> //reserved space for the cloned div to appear
                    <div id="Botones" style="margin-bottom:10px;">
                        <center>
                            <label>Agregar Más</label> //add more button
                                <button type="button" class="btn btn-success glyphicon glyphicon-plus" 
                                onClick="agregarCampoDeTexto('CamposTexto', 'AgregarCampos');" id="botonAgregar" name="botonAgregar"></button>
                        </center>
                    </div>

JS

var contador = 1;

function agregarCampoDeTexto(divName, CamposTexto) {
    if (contador == 25) {
        document.getElementById("botonAgregar").remove();
    } else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = document.getElementById(divName).innerHTML;
        newdiv.className = 'form-group';
        newdiv.id = 'situacion_permiso_precario';
        newdiv.name = 'situacion_permiso_precario';
        document.getElementById(CamposTexto).appendChild(newdiv);
        contador++;
    }

    var selectElements = document.querySelectorAll('textarea');
    for (var i = 1; i < selectElements.length; i++) {
        selectElements[i].id = 'situacion_permiso_precario_' + i;
        selectElements[i].name = 'situacion_permiso_precario_' + i;
    document.getElementById("label_situacion_actual").innerHTML = "Situación Actual:" + i;
    }
}

function quitarCampoDeTexto(obj) {
    if (contador <= 1) {
  return false;
  }else{
        obj.parentNode.Name == 'form-group'
        obj.parentNode.parentNode.removeChild(obj.parentNode);
        contador--;
    }
}

I have been stuck with this for a couple of days, any kind of help would be great, thanks in advance

EDIT

Labels or div counters are not being displayed properly

Answer 1

Remove the parent of parent using double .parentNode

var contador = 1;

function agregarCampoDeTexto(divName, CamposTexto) {
    if (contador == 25) {
        document.getElementById("botonAgregar").remove();
    } else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = document.getElementById(divName).innerHTML;
        newdiv.className = 'form-group';
        newdiv.id = 'situacion_permiso_precario';
        newdiv.name = 'situacion_permiso_precario';
        document.getElementById(CamposTexto).appendChild(newdiv);
        contador++;
    }

    var selectElements = document.querySelectorAll('textarea');
    for (var i = 1; i < selectElements.length; i++) {
        selectElements[i].id = 'situacion_permiso_precario_' + i;
        selectElements[i].name = 'situacion_permiso_precario_' + i;
    document.getElementById("label_situacion_actual").innerHTML = "Situación Actual:" + i;
    }
}

function quitarCampoDeTexto(obj) {
    if (contador <= 1) {
  return false;
  }else{
        obj.parentNode.Name == 'form-group';
        obj.parentNode.parentNode.remove();
        contador--;
    }
}

    <div class="form-group" name="CamposTexto" id="CamposTexto">  
            <label class="col-sm-2 control-label" id="label_situacion_actual">Situación Actual:<a id="contador"></a></label>
        <div class="col-sm-8">
                    <textarea id="situacion_permiso_precario" name="situacion_permiso_precario" 
                    class="form-control input-sm" style="resize:none;height:60px;text-transform:uppercase;" 
                    maxlength="500" onKeyPress="return SoloNumeros(event);"></textarea>
                </div>
                    <div id="quitarCampoDeTexto" name="quitarCampoDeTexto"> 
                        <button type="button" onClick="quitarCampoDeTexto(this);" class="btn btn-danger glyphicon glyphicon-remove"></button>
                    </div>
        </div>
                <div id="AgregarCampos" class="form-group" style="margin-bottom:10px;"></div> 
                    <div id="Botones" style="margin-bottom:10px;">
                        <center>
                            <label>Agregar Más</label>
                                <button type="button" class="btn btn-success glyphicon glyphicon-plus" 
                                onClick="agregarCampoDeTexto('CamposTexto', 'AgregarCampos');" id="botonAgregar" name="botonAgregar"></button>
                        </center>
                    </div>