如何在javascript中添加和删除列表、输入框和选项选择等新元素

我试图用jquery创建一个计算GPA的webview应用程序，我创建了两个按钮，一个用于添加新元素，另一个用于删除元素，我试图同时添加多个元素，例如模块名称，学分输入和选项选择我想知道是否有办法增加模块编号，例如，默认情况下有5个模块，最后一个模块名为模块5，因此当我单击“添加”按钮时，名称应更改为模块6

编辑：-我已经添加了我正在基于以下代码编写的java脚本：-

$（窗口）.on（'pageinit'，function（）{
$（文档）.ready（函数（）{
$（“#Sadd”）。单击（函数（）{
var测试=$（'Sc5'）；
变量i=$（'#Sc5'）.size（）+1；
$（“
学分：
”）。附录（测试）；
i++；
返回false；
});
});
});

GPA计算器
理学士


单元1：


信用：


等级：
—
A.
A-
B+
B
B-
C+
C
C-
D+
D
F


单元2：


信用：


等级：
—
A.
A-
B+
B
B-
C+
C
C-
D+
D
F


单元3：


信用：


等级：
—
A.
A-
B+
B
B-
C+
C
C-
D+
D
F


模块4：


信用：


等级：
—
A.
A-
B+
B
B-
C+
C
C-
D+
D
F


单元5：


信用：


等级：
—
A.
A-
B+
B
B-
C+
C
C-
D+
D
F


添加模块


移除模块

你的平均成绩：



算计


重置


使用正确的选择器，您可以获得此模块计数（）：

更新后编辑

这可能对你有用，一个好的开始。您可能也喜欢这样：对HTML进行一些小的更改，以使选择和附加项目更容易

$(document).ready(function () {
    $("#Sadd").click(function () {
        var lastId = $("#modules h1").length;
        var $newLabel = $("#module-1-label").clone();
        var $newSc = $("#module-1-scredit").clone();
        var $newSgrade = $("#module-1-sgrade").clone();
        $newLabel.html("<h1>Module " + (lastId+1) + ":</h1>");
        $newSc.find("label").attr("for", "Sc"+(lastId+1));
        $newSc.find("input").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
        $newSgrade.find("label").attr("for", "Sc"+(lastId+1));
        $newSgrade.find("select").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
        $("#modules").append($newLabel, $newSc, $newSgrade);
    });
});

$（文档）.ready（函数（）{
$（“#Sadd”）。单击（函数（）{
var lastId=$（“#模块h1”）。长度；
var$newLabel=$（“#模块-1-label”）.clone（）；
var$newSc=$（“#模块-1-scredit”）.clone（）；
var$newSgrade=$（“#module-1-sgrade”）.clone（）；
$newLabel.html（“模块”+（lastId+1）+“：”；
$newSc.find（“label”）.attr（“for”，“Sc”+（lastId+1））；
$newSc.find（“input”）.attr（“name”，“Sc”+（lastId+1））.attr（“id”，“Sc”+（lastId+1））；
$newSgrade.find（“label”）.attr（“for”，“Sc”+（lastId+1））；
$newSgrade.find（“select”）.attr（“name”，“Sc”+（lastId+1））.attr（“id”，“Sc”+（lastId+1））；
$（“#模块”）.append（$newLabel、$newSc、$newSgrade）；
});
});

使用
.clone（）
可以为您做很多繁重的工作，您只需稍微修改一下新的ID和名称即可。
您让脚本在哪里运行？我无法在控制台中显示的demo@TwistyIt中添加输入，因此您可以在那里看到值。我两次都得了5分。您询问了如何获取下一个ID，因此将向当前ID添加1。在创建新模块时使用它。添加非常简单，当您要删除时，您要删除哪一个？您必须提供一些您尝试过的代码。这里没有人会为您编写代码。我只是想在单击“添加按钮@扭转”时创建一个新的输入。根据您当前的格式，您将添加一个新的输入，但在一个新的列表项中，您只需要文本还是文本并选择？有很多事情要做，你必须先尝试一下代码。另外，您想在哪里添加它，在“添加模块”按钮之后还是之前？它不像你想象的那么简单，但也不太难。
$(document).ready(function () {
    $("#Sadd").click(function () {
        var lastId = $("#modules h1").length;
        var $newLabel = $("#module-1-label").clone();
        var $newSc = $("#module-1-scredit").clone();
        var $newSgrade = $("#module-1-sgrade").clone();
        $newLabel.html("<h1>Module " + (lastId+1) + ":</h1>");
        $newSc.find("label").attr("for", "Sc"+(lastId+1));
        $newSc.find("input").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
        $newSgrade.find("label").attr("for", "Sc"+(lastId+1));
        $newSgrade.find("select").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
        $("#modules").append($newLabel, $newSc, $newSgrade);
    });
});