javascript - 使用 JavaScript 或 Jquery 动态删除 html 输入字段

Question

我有一个包含1个选择输入字段的表单。

当我在选择字段中选择其中一个选项时。默认情况下，我创建一个包含文本输入字段、关闭按钮和“添加字段”按钮以添加更多输入文本字段的部分。

一切工作正常，但我不确定如何删除动态创建的输入字段。当我单击输入字段旁边的删除按钮时，我不确定如何使用 id 或类或名称属性或什么 来查找并删除输入字段。

我的代码

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);

    }

Answer 1

您可以使用closest()。

但它仅适用于现代浏览器。破解您可以阅读的 here

function removeInputField (selectedField) {
        selectedField.closest('.input_field').remove();
    }

查看示例

<style>
.input_field{border: 2px solid red;}
</style>

    <script>
	function removeInputField (selectedField) {
        selectedField.closest('.input_field').remove();
    }
	</script>
<div>
	<div class="input_field">i<button onclick="removeInputField(this);">1</button></div>
	<div class="input_field">am<button onclick="removeInputField(this);">2</button></div>
	<div class="input_field">another<button onclick="removeInputField(this);">3</button></div>
	<div class="input_field">element<button onclick="removeInputField(this);">4</button></div>
</div>