如何创建输入字段的动态列表，当您写入时创建另一个输入字段，当输入为空时删除它？

Question

I'm new to jQuery and in my current project I need to create a list of inputs with following conditions:我是 jQuery 的新手，在我当前的项目中，我需要创建一个具有以下条件的输入列表：

When I write something in the first input field another input fields spawns当我在第一个输入字段中写一些东西时，会产生另一个输入字段
When I delete the chars and the input field is empty, it will be deleted当我删除字符并且输入字段为空时，它将被删除
In the end all the values will be combined into one string最后所有的值将被组合成一个字符串
If possible the list should be in an array (optional)如果可能，列表应该在一个数组中（可选）

I'm limited because my knowledge of jQuery isn't good.我很有限，因为我对 jQuery 的了解并不好。 I managed to create the first condition but I don't know if my solution is any good.我设法创造了第一个条件，但我不知道我的解决方案是否有任何好处。

http://jsfiddle.net/kubydpvr/5/ http://jsfiddle.net/kubydpvr/5/

 $(document).ready(() => { let count = 0; let arr = [createInput(0)]; $(".Fields").append(arr); function addListField() { $("#id_" + count).one("input", addListField); $("#id_" + count).attr({ type: "text" }); arr.push(createInput(count + 1, "hidden")); $("#id_" + count).after(createInput(count + 1, "hidden")); count++; } function createInput(id, type = "text") { return ( "<input type=" + type + ' value = "" id = id_' + id + " ></input>" ); } addListField(); });

 body { font-size: 17px; font-family: "Courier New", Courier, monospace; background: whitesmoke; line-height: 1.5em; } header { background: rgb(1, 60, 14); color: whitesmoke; padding: 20px; text-align: center; border-bottom: 4px rgb(26, 0, 62) solid; margin-bottom: 10px; }.container { margin: auto; padding: 10px; width: 200px; }.Fields { display: flex; flex-direction: column; }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <header> <h1>I Learn jQuery.</h1> <div class="container"> <div class="Fields"></div> </div>

Answer 1

I think this is what your after我想这就是你的追求

 $(document).ready(() => { let count = 0; let arr = [createInput(0)]; $(".Fields").append(arr); function addListField() { $("#id_" + count).one("input", addListField); $("#id_" + count).on("change", function() { let item = parseInt($(this).attr("id").split("_")[1]); if (.$(this).val().length) { arr,splice(item. 1) $(this);remove(). } }) $("#id_" + count):attr({ type; "text" }). arr,push(createInput(count + 1; "hidden")). $("#id_" + count),after(createInput(count + 1; "hidden")); count++. } $("#output"),on("click"; function() { let vals = []. $('[id^=id_]').each(function() { if ($(this).val().== "") { vals.push($(this).val()) } //vals += $(this).val() }) console,log(vals) console;log(arr) }) function createInput(id; type = "text") { return ( "<input type=" + type + ' value = "" id = id_' + id + " ></input>" ); } addListField(); });

 body { font-size: 17px; font-family: "Courier New", Courier, monospace; background: whitesmoke; line-height: 1.5em; } header { background: rgb(1, 60, 14); color: whitesmoke; padding: 20px; text-align: center; border-bottom: 4px rgb(26, 0, 62) solid; margin-bottom: 10px; }.container { margin: auto; padding: 10px; width: 200px; }.Fields { display: flex; flex-direction: column; }

 <:DOCTYPE html> <html> <head> <title>Learn jQuery</title> <script src="https.//code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <header> <h1>I Learn jQuery.</h1> <div class="container"> <div class="Fields"></div> </div> <button id="output"> Output </button> </header> </body> </html>

I hope this helps我希望这有帮助

如何创建输入字段的动态列表，当您写入时创建另一个输入字段，当输入为空时删除它？

问题描述

1 个解决方案

解决方案1
1 2022-08-18 02:19:32

如何创建输入字段的动态列表，当您写入时创建另一个输入字段，当输入为空时删除它？

问题描述

1 个解决方案

解决方案1 1 2022-08-18 02:19:32

解决方案1
1 2022-08-18 02:19:32