如何使用 cloneNode 创建动态表单元素
[英]How to create dynamic form elements using cloneNode
问题描述
I'm trying to create an interactive resume template using javascript and html and have managed to use cloneNode to duplicate work history blocks (see attached screenshot)
我正在尝试使用 javascript 和 html 创建一个交互式简历模板，并设法使用cloneNode复制工作历史记录块（见附件截图）
The problem(s) I am having is that clicking on the add list item button in the cloned/duplicated work history block at the bottom, creates a <li> item in the 1st/cloned element.我遇到的问题是单击底部克隆/复制的工作历史记录块中的添加列表项按钮，会在第一个/克隆元素中创建一个<li>项。
The objective is to be able to add or delete ````` list elements within a specific work history block and to also be able to add/remove entire work history sections.目标是能够在特定的工作历史块中添加或删除 ````` 列表元素，并且还能够添加/删除整个工作历史部分。 Currently it deletes from the top down, which is also an issue.目前它从上到下删除，这也是一个问题。
Thanks for any pointers in advance.感谢您提前提供任何指示。
CODE代码
<!DOCTYPE html>
<html>
<body>
<div id="test">
<div id="node">
<div class="work_history">
<div class="row">
<strong>
<input type="text" name="company" value="ACME Company">
</strong>
</div>
<div class="row">
<input type="text" name="position" value="Cheese Taster">
</div>
<input type="text" name="start" value="1/2019">
<input type="text" name="end" value="2/2020">
<ul id="list">
<li>
<textarea id="task" name="task" rows="4" cols="50">Did some things. Tasted cheese.</textarea>
</li>
<button onclick="addTask()">Add List Item</button>
<button onclick="RemoveTask()">Delete List Item</button>
</ul>
<button onclick="addWork()">Add Work</button>
<button onclick="removeWork()">Remove Work</button>
</div>
</div>
</div>
<script>
function addWork() {
var div = document.getElementById("node");
var cln = div.cloneNode(true);
//cln.setAttribute( 'id', 'newId');
document.getElementById("test").appendChild(cln);
}
function removeWork(){
var last = document.getElementById("test");
// want to delete the last added work history not first
last.removeChild(last.childNodes[0]);
}
function addTask(){
var ul = document.getElementById("list");
var task = document.getElementById("task");
var li = document.createElement("li");
li.setAttribute('id',task.value);
li.appendChild(document.createTextNode(task.value));
ul.appendChild(li);
}
function removeTask(){
var ul = document.getElementById("list");
var task = document.getElementById("task");
var item = document.getElementById(task.value);
ul.removeChild(item);
}
</script>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2020-06-24 07:13:18
You'd have to use e.currentTarget instead of document.getElementById , otherwise you're only referring to the first instance of it:您必须使用e.currentTarget而不是document.getElementById ，否则您仅指的是它的第一个实例：
function addWork(e) { const div = e.currentTarget.parentElement; const cln = div.cloneNode(true); document.getElementById("test").appendChild(cln); } function removeWork(e) { const last = e.currentTarget.parentElement; last.parentElement.removeChild(last); } function addTask(e) { const ul = e.currentTarget.parentNode; let task = ul.children[0].childNodes[1].value; let li = document.createElement("li"); // Replace paragraph breaks task = task.replace(/\r?\n|\r/g, " "); li.innerText = task; ul.appendChild(li); } function removeTask(e) { const ul = e.currentTarget.parentNode; ul.removeChild(ul.lastChild); }
<.DOCTYPE html> <html> <body> <div id="test"> <div id="node"> <div class="work_history"> <div class="row"> <strong> <input type="text" name="company" value="ACME Company"> </strong> </div> <div class="row"> <input type="text" name="position" value="Cheese Taster"> </div> <input type="text" name="start" value="1/2019"> <input type="text" name="end" value="2/2020"> <ul id="list"> <li> <textarea name="task" rows="4" cols="50">Did some things. Tasted cheese.</textarea> </li> <button onclick="addTask(event)">Add List Item</button> <button onclick="removeTask(event)">Delete List Item</button> </ul> <button onclick="addWork(event)">Add Work</button> <button onclick="removeWork(event)">Remove Work</button> </div> </div> </div> </body> </html>
This allows you to refer to the specific element where the click event occurred and add/remove any elements that are relative within the DOM.这允许您引用发生单击事件的特定元素并添加/删除 DOM 中的任何相关元素。
As a side note, it's best practice to have unique id attributes, adding the same id to multiple elements goes against that.作为旁注，最好的做法是拥有唯一的id属性，向多个元素添加相同的id与此相反。
解决方案2
-1 2020-06-24 06:05:00
var add_button = $(".add_form_field"); var wrapper = $(".container1"); var max_fields = 9; var x = 1; $(add_button).click(function (e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append( ` <div class="email"> <label for="">Year</label> <input type="text" name="eduYear${x}"> <label for="">Title Name</label> <input type="text" name="eduTitle${x}"> <label for="">Institution/School Name</label> <input type="text" name="eduPlace${x}"> <label for="">Details</label> <input type="text" name="eduNotes${x}"> <br><a href="#" class="delete">Delete</a><hr></div>` ); //add input box } }); $(wrapper).on("click", ".delete", function (e) { e.preventDefault(); $(this).parent("div").remove(); x--; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container1"> <h2>Educations</h2> <button type="button" class="add_form_field">Add Education <span style="font-size:16px; font-weight:bold;">+ </span> </button> <div class="email"> <label for="">Year</label> <input type="number" name="eduYear1"> <label for="">Title Name</label> <input type="text" name="eduTitle1"> <label for="">Institution/School Name</label> <input type="text" name="eduPlace1"> <label for="">Details</label> <input type="text" name="eduNotes1"> </div>
you can try this to create dynamic form你可以试试这个来创建动态表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.