Question

我对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>

Answer 1

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

onClick="removeFact(this.parentNode)"

或以这种方式改变你的功能

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

Answer 2

你必须更深入一级。

试试这个：

  <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.parentNode);
                i--;
            }
</script>

删除动态表单字段JS / HTML

2 个答案: