通过页面上的添加按钮动态添加问题的问题答案

【问题标题】：Problem with dynamically adding questions via add button on page通过页面上的添加按钮动态添加问题的问题
【发布时间】：2020-05-30 06:49:08
【问题描述】：

所以这是我的表单创建器，它将用于在 django 中生成表单。基本上这是一个动态生成的 django "FormView" 。所以现在的问题是当用户从 UI 中删除一个问题时，问题的编号不会自动重新排序。我需要这些编号，因为在后端，django 将使用这些编号通过将接收到的数据映射到实际的 models.CharField 和其他相应字段来创建表单。有人可以告诉可以使用什么方法吗？对于不知道/使用 django 图片的人，应该好好解释一下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Builder</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


</head>

<body>

    <style>
        body{width:90vw;
display:flex;
flex-direction: column;
justify-items: space-between;
align-items: center;

}

.form-choice__dropdown{
    display: flex;
    justify-items: space-between;
}
    </style>
    <div class="form__heading">

        <h1 class="heading-main">
            <input type="text" placeholder="Enter form heading...">
        </h1>
    </div>

    <div class="form-choice__dropdown">
        <div class="form-type1">
            <label for="form-type1__select">
                <select name="form-type1__select" id="">
                    <option value="Project Request">Project Request</option>
                    <option value="ToT Request">ToT Request</option>
                    <option value="NDA Request">NDA Request</option>
                    <option value="MoU Request">MoU Request</option>
                    <option value="Tech Service Request">Tech Service Request</option>
                </select>
            </label>
        </div>
        <div class="form-type2">

            <label for="form-type2__select">
                <select name="form-type1__select" id="">
                    <option value="National">National</option>
                    <option value="International">International</option>
                </select>
            </label>
        </div>


        <div class="form-type3">
            <label for="form-type1__select">
                <select name="form-type1__select" id="">
                    <option value="Sponsored">Sponsored</option>
                    <option value="Collaborative">Collaborative</option>
                    <option value="Consultancy">Consultancy</option>
                </select>
            </label>
        </div>


    </div>

    <div id="question-answer-pairs" class="question-answer-pairs">


        <button id="add-question">Add Question</button>
    </div>


    <script>
        window.removeQuestion = function (el) {
            el.parentNode.parentNode.removeChild(el.parentNode);

        }

        const putRadioOptions = function () {
            this.insertAdjacentElement("afterbegin",
                `<input type='text' placeholder="Enter comma separated options(Do not use comma in any option) ">`
        
        
            )


        }


        var questionNumber = 1;

         var questionList
        document.getElementById("add-question").addEventListener('click', function (event) {
            let addQuestionButton = event.currentTarget;



            let questionAnswerPair = `

<fieldset>

<legend class="question${questionNumber}__question">
Put in the Question${questionNumber}
<input type="text" >

</legend>
<label for="answer${questionNumber}-type">
Choose type of answer field:

<select name="answer${questionNumber}-type" class="question${questionNumber}__answer">
    <option value="email">Email </option>
    <option value="tel">Telephone</option>
    <option value="file">File Upload</option>
    <option value="radio" onclick="putRadioOptions()">Radio Buttons</option>
    <option value="sex">Sex</option>
    <option value="url">Range</option>
    <option value="date">Date</option>
</select>
</label>

<button onclick="removeQuestion(this)">Remove</button>
</fieldset>

`

            addQuestionButton.insertAdjacentHTML("beforebegin", questionAnswerPair);
            ++questionNumber;
        }

        )


    </script>




</body>

</html>

就是这样

删除 Question2 后

我不仅需要更改文本，这很容易。问题是，当我删除问题编号 3 的第二个问题时，name= question${questionNumber} 也应该更改为 2。所以我希望看到所有这些类中的数字以及名称和 ID 自动连续编号。

在此处输入图片描述 javascript python django

【问题讨论】：

标签： javascript django

【解决方案1】：

使用事件委托的原则，我将eventListener 添加到div 和id="question-answer-pairs"。现在遍历所有 fieldsets 并将所有数字替换为 for 循环索引变量和正则表达式就是我所做的。

正则表达式不好，但在我的情况下效果很好。对于使用 h1 标签或其他带有数字的标签的人，需要更好的正则表达式。

document.getElementById("question-answer-pairs").addEventListener('click', function (event) {
    if (event.target.textContent == "Remove") {
        event.target.parentNode.remove();
        let allFieldset = event.currentTarget.getElementsByTagName("fieldset")
        for (let i = 0; i < allFieldset.length; i++) {
            allFieldset[i].innerHTML = allFieldset[i].innerHTML.replace(/(.*?)(\d+)(.*)/g, `$1${i + 1}$3`);

        }

        questionNumber = allFieldset.length + 1;
    }

})

【讨论】：