jQuery append() 和 remove() 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1501181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery append() and remove() element
提问by Brooke.
I have a form where I'm dynamically adding the ability to upload files with the append function but I would also like to be able to remove unused fields. Here is the html markup
我有一个表单，我在其中动态添加了使用 append 函数上传文件的功能，但我也希望能够删除未使用的字段。这是 html 标记
<span class="inputname">Project Images:
<a href="#" class="add_project_file"><img src="images/add_small.gif" border="0"></a>
</span>
<span class="project_images">
<input name="upload_project_images[]" type="file" /><br/>
</span>
Right now if they click on the "add" gif a new row is added with this jquery
现在，如果他们单击“添加”gif，则会使用此 jquery 添加新行
$('a.add_project_file').click(function() {
$(".project_images").append('<input name="upload_project_images[]" type="file" class="new_project_image" /> <a href="#" class="remove_project_file" border="2"><img src="images/delete.gif"></a><br/>');
return false;
});
To remove the input box i've tried to add the class "remove_project_file" then add this function.
要删除输入框，我尝试添加类“remove_project_file”，然后添加此函数。
$('a.remove_project_file').click(function() {
$('.project_images').remove();
return false;
});
I think there should be a much easier way to do this. Maybe i need to use the $(this) function for the remove. Another possible solution would be to expand the "add project file" to do both adding and removing fields.
我认为应该有一种更简单的方法来做到这一点。也许我需要使用 $(this) 函数进行删除。另一种可能的解决方案是扩展“添加项目文件”以添加和删除字段。
Any of you JQuery wizards have any ideas that would be great
你们中的任何一个 JQuery 向导都有任何很棒的想法
回答by Alex Barrett
Since this is an open-ended question, I will just give you an idea of how I would go about implementing something like this myself.
由于这是一个开放式问题，我只会让您了解我将如何自己实施这样的事情。
<span class="inputname">
Project Images:
<a href="#" class="add_project_file">
<img src="images/add_small.gif" border="0" />
</a>
</span>
<ul class="project_images">
<li><input name="upload_project_images[]" type="file" /></li>
</ul>
Wrapping the file inputs inside lielements allows to easily remove the parent of our 'remove' links when clicked. The jQuery to do so is close to what you have already:
将文件输入包装在li元素中可以在单击时轻松删除我们的“删除”链接的父级。这样做的 jQuery 与您已经拥有的很接近：
// Add new input with associated 'remove' link when 'add' button is clicked.
$('.add_project_file').click(function(e) {
e.preventDefault();
$(".project_images").append(
'<li>'
+ '<input name="upload_project_images[]" type="file" class="new_project_image" /> '
+ '<a href="#" class="remove_project_file" border="2"><img src="images/delete.gif" /></a>'
+ '</li>');
});
// Remove parent of 'remove' link when link is clicked.
$('.project_images').on('click', '.remove_project_file', function(e) {
e.preventDefault();
$(this).parent().remove();
});
回答by boateng
You can call a reset function before appending. Something like this:
您可以在追加之前调用重置函数。像这样的东西：
function resetNewReviewBoardForm() {
$("#Description").val('');
$("#PersonName").text('');
$("#members").empty(); //this one what worked in my case
$("#EmailNotification").val('False');
}
