如何正确在 Svelte 中动态添加和删除文本输入字段？

Question

我是 Svelte 和 web 开发的新手，希望您能指出正确的方向。

当前代码属于一个苗条的组件。 如图所示： https://svelte.dev/repl/f0e5c30117724ec38b7d19781d2c4de6?version=3.48.0

它应该默认显示一个文本字段，同时允许在动态添加的按钮上添加和删除一个附加文本字段。 目前，此代码可以动态添加文本字段，但是不能在单击按钮时动态删除文本字段。

我相信 GetDynamicElement function 中可能有错误。 但是，我不确定具体在哪里。 有什么建议么？

ps 我知道这里的答案很接近，但我认为它们不适用于这种情况，尤其是在 Svelte 上。

<script>
  var num_links = 1;
  let container;

  const GetDynamicElement = (value) => {
    return (
      '<input name = "DynamicField" type="text" size =111  id =link  placeholder="Enter Next link! " value =  "' +
      value +
      '" />' +
      '<input type="button" value="Remove" on:click = {RemoveField(this)}>'
      // "RemoveSuggestionCart(this)" />'
    );
  };

  const addField = () => {
    if (num_links < 2) {
      console.log("addField");
      const div = document.createElement("DIV");
      div.innerHTML = GetDynamicElement("");
      container.appendChild(div); // Append timetable space
      num_links += 1;
    }
  };

  //Removes the entire division inclusive of it's text field.
  const RemoveField = (div) => {
    console.log("RemoveField");
    div.removeChild(div.parentNode);
    num_links -= 1;
  };
</script>



<div>
  <input
    name="DynamicField"
    type="text"
    size="121"
    id="link"
    placeholder="Enter First Link!"
  />
  <div bind:this={container} />
</div>

<button on:click|preventDefault={addField}>[+ add timetable link]</button>

<style>
</style>

Answer 1

您可以使用num_link和 svelte 的#each来使用 svelte 创建输入：

{#each Array(num_links) as _, i}
<div>
  <input
    name="DynamicField"
    type="text"
    size="121"
    id={`link_${i}`}
    placeholder="Enter First Link!"
  />
</div>
{/each}

工作示例： https ://svelte.dev/repl/04169e030b6944258cfd07af15873b48?version=3.48.0

Answer 2

添加/删除字段并有一个按钮来记录或发送到端点或任何带有“记录”按钮的东西： https://svelte.dev/repl/2441993f8d9946aa894bf07a8a8f9b4f