Question

我生成表单，并且可以基于来自用户的输入重复表单的一个部分，即，按钮点击添加复制表单部分以输入更多信息。我使用cloneNode，因为表单部分包含我希望＆＃34;复制＆＃34;的HTML。当我单击按钮一次时，该部分将重复。但是，当我第二次单击该按钮时，将克隆原始表单和先前克隆的节点的内容。因此，不是添加一个新部分，而是添加两个新部分。第三个按钮单击会添加四个新部分。 Polymer元素的代码如下：

<dom-module id="services-block">
<template>
<style>
    .horizontal-section {
        min-width: 130px;
    }
    paper-button {
        margin-bottom: 24px;
    }
    paper-button.colorful {
        color: #4285f4;
        width: 150px;
    }
</style>
<div id="myDiv">
    <h3>Services</h3>
    <div id="mainDiv">
        <paper-input name="@context" hidden value="https://raw.githubusercontent.com/Network-of-BioThings/smartAPI/master/schema/smartAPI.api.jsonld"></paper-input>
        <paper-input name="service-name" label="* Name" required type="string"></paper-input>
        <paper-input name="service-description" label="Description" type="string"></paper-input>

         <p>HTTP Method</p>
         <input list="httpMethod" name="HTTP Method" label="HM Test">
         <datalist id="httpMethod">
            <option value="GET">
            <option value="PUT">
            <option value="POST">
            <option value="DELETE">
        </datalist>
        </div>
    </div>
<paper-button class="colorful" raised on-click="repeatDiv">Add</paper-button>
<paper-button class="colorful" raised on-click="deleteDiv">Remove</paper-button>
</template>

<script>
Polymer({
    is: "services-block",
    repeatDiv: function() {
        console.log("** Add services block")
        var div = document.getElementById('myDiv');
        clone = div.cloneNode(true);
        clone.id = "some_id";
        document.getElementById("myDiv").appendChild(clone);
    }
});
</script>
</dom-module>

Answer 1

您将克隆添加为myDiv的子项，因此当您第二次复制myDiv时，您将复制它并且它是子项。可能需要改为

document.getElementById("myDiv").parentNode.appendChild(clone);

使用cloneNode在Polymer中重复div元素

1 个答案: