javascript - 删除动态表单字段JS/HTML

我对JS和HTML相对较新，并且正在按照本教程（https://www.youtube.com/watch?v=iaeCSh7YJDM&t=422s）进行操作，以便将选择框和输入框变成动态表单字段，以便使用添加按钮根据需要添加尽可能多的选择框和输入框。尽管在实现了与视频中相同的代码后，添加按钮仍然可以正常工作，但是移除按钮无法正常工作，我也不知道为什么。我回去重新看了一下，并交叉检查了视频代码，尽管我似乎看不到我所缺少的内容。任何帮助将不胜感激。以下是我拥有的代码部分。

的HTML

<div class="form-group row" id = "addF" >
                <label class="col-sm-3 col-lg-3 col-md-3 form-control-label">
                    Label
                </label>
                <div class="col-sm-4 col-lg-4 col-md-4">
                <select class="form-control" id="xxxx" name="yyyyy" required>
                        <option class="placeholder" selected disabled value="" style="display:none;">Select Fact</option>
                </select>
                </div>
                <div class="col-sm-3 col-lg-3 col-md-3">
                    <input type="text" class="form-control" id=vvvv" name="zzzz" required>
                </div>
                <div class="col-sm-1 col-lg-1 col-md-1">
                <input type="button" id="add_fact()" onClick="addFact()" value="+">
                </div>
            </div>

JS

<script type="text/javascript">
        var i =1;

        function addFact(){
            i++;
            var div = document.createElement('div');
            div.innerHTML = '<label class="col-sm-3 col-lg-3 col-md-3 form-control-label">Label '+i+'</label><div class="col-sm-4 col-lg-4 col-md-4"> <select class="form-control" id="xxxx'+i+'" name="yyyy_'+i+'" required><option class="placeholder" selected disabled value="" style="display:none;">Select Fact</option></select></div><div class="col-sm-3 col-lg-3 col-md-3"> <input type="text" class="form-control" id="vvvv" name="zzzz_'+i+'" required></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" id="add_fact()" onClick="addFact()" value="+"></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" value="-" onClick="removeFact(this)"></div>';
            document.getElementById('addF').appendChild(div);

        function removeFact(div) {
            document.getElementById('addF').removeChild(div.parentNode);
            i--;
        }
</script>

最佳答案

在“ removeFact”函数中，您没有收到div元素；当您使用“ this”作为参数调用它时，您会收到button元素，因此要对其进行修复，必须像这样调用函数

onClick="removeFact(this.parentNode)"

或以这种方式更改您的功能

function removeFact(button) {
    document.getElementById('addF').removeChild(button.parentNode.parentNode);
    i--;
}

关于javascript - 删除动态表单字段JS/HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42560262/