javascript - 如何通过增加输入id来获取输入值？

Question

我有动态输入加法器，每次添加输入时，输入 ID 号都会增加。

我想要最后一个输入值，所以我尝试使用 var 来声明最后一个键 id。

key=$("#key"+ intId +"");
var val=$("#val"+ intId +"");

但这不起作用，因为它会警告该值未定义。

我还想提醒已删除的输入值，但没有成功。

为什么我无法获取 key 和 val 值？

是否有其他解决方案来选择最后一个 key val 输入值和删除的输入值？

HTML

<fieldset id="buildyourform">
<input type="text" class="key" />
<input type="text" class="val" />
</fieldset>
<input type="button" value="+" class="add" id="add" />

JQuery

$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" class=\"setk\" id=\"key"+ intId +"\" />");
var fType = $("<input type=\"text\" class=\"setv\" id=\"val"+ intId +" \" />");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"X\" />");
var key=$("#key"+ intId +"");
var val=$("#val"+ intId +"");
var set=$(".setk");
console.log(set.length);
console.log(key);
console.log(key.val());
console.log($("#key1").val());
removeButton.click(function() {
    $(this).parent().remove();
    alert("Removed "+key.val())
    //message = new Paho.MQTT.Message("del "+key.val()+"");
    //message.destinationName = "dev1/cfg";
    //mqtt.send(message);
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
alert("Set "+key.val()+" "+val.val());
//message = new Paho.MQTT.Message("set "+key.val()+" "+val.val());
//message.destinationName = "dev1/cfg";
//mqtt.send(message);

});

$("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" class=\"setk\" id=\"key"+ intId +"\" />");
        var fType = $("<input type=\"text\" class=\"setv\" id=\"val"+ intId +" \" />");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"X\" />");
        var key=$("#key"+ intId +"");
        var val=$("#val"+ intId +"");
        var set=$(".setk");
        console.log(set.length);
        console.log(key);
        console.log(key.val());
        console.log($("#key1").val());
        removeButton.click(function() {
            $(this).parent().remove();
            alert("Removed "+key.val())
;
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fType);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
        alert("Set "+key.val()+" "+val.val());

      
    });

fieldset
{
    border: solid 1px #000;
    padding:10px;
    display:block;
    clear:both;
    margin:5px 0px;
    height:100px;
    overflow: scroll;
    overflow-x: hidden;
}

input.add
{
    float:left;
}
input.fieldname
{

}
select.fieldtype
{
    float:left;
    display:block;
    margin:5px;
}
input.remove
{
}
#yourform label
{
    float:left;
    clear:left;
    display:block;
    margin:5px;
}
#yourform input, #yourform textarea
{
    float:left;
    display:block;
    margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="buildyourform">
<input type="text" class="key" />
<input type="text" class="val" />
</fieldset>
<input type="button" value="+" class="add" id="add" />

Answer 1

试试这个 JS 而不是你的:

$("#add").click(function () {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
    var fName = $("<input type=\"text\" class=\"setk\" id=\"key" + intId + "\" />");
    var fType = $("<input type=\"text\" class=\"setv\" id=\"val" + intId + " \" />");
    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"X\" />");
    //Add objects to html
    fieldWrapper.append(fName);
    fieldWrapper.append(fType);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
    //Then use
    var key = $("#key" + intId + "");
    var val = $("#val" + intId + "");
    var set = $(".setk");
    console.log(set.length);
    console.log(key);
    console.log(fName.val());
    console.log($("#key1").val());
    removeButton.click(function () {
        $(this).parent().remove();
        alert("Removed " + key.val())
    });
    alert("Set " + key.val() + " " + val.val());
});