У меня есть форма, содержащая 1 поле ввода для выбора.

Когда я выбираю один из вариантов в поле выбора. По умолчанию я создаю раздел, содержащий поле ввода текста, кнопку закрытия и кнопку "Добавить поле", чтобы добавить дополнительные текстовые поля ввода.

все работает нормально, но я не уверен, как удалить динамически созданное поле ввода. Я не уверен, что использовать атрибут id или class или name или что, чтобы затем найти и удалить поле ввода, когда я нажимаю кнопку удаления рядом с ним.

мой код

HTML-код

<div class="form-group">
    <div class="row">
        <div class="col-md-12" id="extraFieldsLabelHolder"></div>
    </div>
    <div class="row" id="extraFields">
      <!-- here I can add as many custom fields I want -->
    </div>
</div>

JS-КОД

 function addFields(){
        var selectVal = document.getElementById('type_id').value;
        if(selectVal === 'checkbox' || selectVal === 'radio'){

            if(!document.getElementById("addBtn")){
                //add input fields
                var extraFieldDIV = document.getElementById("extraFieldsLabelHolder");
                var fieldLabel = document.createElement("label");
                    fieldLabel.setAttribute("for", "extraFields");
                    fieldLabel.setAttribute('id', "extraFieldsLabel")
                    fieldLabel.textContent = "Add Custom Field Options:";
                extraFieldDIV.appendChild(fieldLabel);

  //IT MAY LOOK COMPLEX BUT ITS FAIRLY STRAIGHTFORWARD
  //Code below creates mainDiv and a Div which holds input and a delete btn
                var fieldArea = document.getElementById('extraFields');
                var mainDiv = document.createElement("div");
                    mainDiv.setAttribute("class", "input_field col-md-4");
                    mainDiv.setAttribute("style", "margin-bottom:10px;");
                fieldArea.appendChild(mainDiv);

                var div = document.createElement("div");
                    div.setAttribute("class", "input-group");
                mainDiv.appendChild(div);

                var input = document.createElement("input");
                    input.setAttribute("type", "text");
                    input.setAttribute("class", "form-control input_field");
                    input.setAttribute("placeholder", "Enter value...");
                    input.setAttribute("name", "extras[]");
                div.appendChild(input);

                var span = document.createElement("span");
                    span.setAttribute("class", "input-group-btn");
                div.appendChild(span);

                var closeBtn = document.createElement("button");
                    closeBtn.setAttribute("type", "button");
                    closeBtn.setAttribute("class", "btn btn-danger");
       //YOU CAN SEE HERE I PASS ONCLICK METHOD but not sure what to do NEXT
       //ALL I GET IS INFO OF A DELETE BUTTON and Not the actual DIV which contains input field too.             
                closeBtn.setAttribute("onclick", "removeInputField(this)");
                span.appendChild(closeBtn);

                var iElement = document.createElement("i");
                    iElement.setAttribute("class", "pe-7s-close");
                    iElement.setAttribute("style", "font-size:20px");
                closeBtn.appendChild(iElement);

                var btnArea = document.getElementById('addFieldBtnHolder');
                var btn = document.createElement("button");
                    btn.setAttribute("type", "button");
                    btn.setAttribute("class", "btn btn-primary");
                    btn.setAttribute("style", "margin-top:15px;");
                    btn.setAttribute("onclick", "addInputField()");
                    btn.textContent = "Add Field";
                    btn.setAttribute('id', "addBtn");
                btnArea.appendChild(btn);
            }

        }else{
            if(document.getElementById("addBtn")) {
                document.getElementById("extraFieldsLabel").remove();
                document.getElementById("addBtn").remove();
                var inputs = document.getElementsByClassName('input_field');
                for(var i = 0; i < inputs.length; i++){
                    inputs[i].remove();
                }
            }
        }
    }

    function addInputField(){

        console.log("test2");
        var fieldArea = document.getElementById('extraFields');
        var mainDiv = document.createElement("div");
        mainDiv.setAttribute("class", "input_field col-md-4");
        mainDiv.setAttribute("style", "margin-bottom:10px;");
        fieldArea.appendChild(mainDiv);

        var div = document.createElement("div");
        div.setAttribute("class", "input-group");
        mainDiv.appendChild(div);

        var input = document.createElement("input");
        input.setAttribute("type", "text");
        input.setAttribute("class", "form-control input_field");
        input.setAttribute("placeholder", "Enter value...");
        input.setAttribute("name", "extras[]");
        div.appendChild(input);

        var span = document.createElement("span");
        span.setAttribute("class", "input-group-btn");
        div.appendChild(span);

        var closeBtn = document.createElement("button");
        closeBtn.setAttribute("type", "button");
        closeBtn.setAttribute("class", "btn btn-danger");
        closeBtn.setAttribute("onclick", "removeInputField(this)");
        span.appendChild(closeBtn);

        var iElement = document.createElement("i");
        iElement.setAttribute("class", "pe-7s-close");
        iElement.setAttribute("style", "font-size:20px");
        closeBtn.appendChild(iElement);
    }

//WHAT LOGIC DO I PUT HERE TO DELETE THE DIV CONTAINING input and delete button?
    function removeInputField (selectedField) {
        console.log("this: ", selectedField.value);

    }