[英]Remove dynamically created elements in a form
I know this is a basic questions, but I am working on making a dynamic form and was having a bit of trouble figuring out how to delete elements that share the same class.我知道这是一个基本问题,但我正在制作一个动态表单,并且在弄清楚如何删除共享相同 class 的元素时遇到了一些麻烦。 I have looked around on the web and other posts for a means to accomplish this, but still was unable to figure it out.
我在 web 和其他帖子上四处寻找实现这一目标的方法,但仍然无法弄清楚。
I am new to this so I apologize for the basic question.我是新手,所以我为这个基本问题道歉。 Below, I have pasted the relevant code and my attempt at this.
下面,我粘贴了相关代码和我的尝试。 Would anyone be able to assist me?
有人可以帮助我吗?
var ingCounter = 1;
var dirCounter = 1;
var limit = 10;
function addIngredient(divName){
if (ingCounter == limit) {
alert("You have reached the add limit");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='ingredientSet'><input class='ingredientInput' type='text' name='ingredients[]'><button class='deleteIngredientButton' type='button' onClick='removeElement('directionSet');'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
ingCounter++;
}
}
function addDirection(divName){
if (dirCounter == limit) {
alert("You have reached the add limit");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='directionSet'><input class='directionInput' type='text' name='directions[]'><button class='deleteDirectionButton' type='button'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
dirCounter++;
}
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
<!-- Required program scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Style Sheets-->
<link rel="stylesheet" href="/styles/navBarStyle.css">
<link rel="stylesheet" href="/styles/myRecipesStyle.css">
<link rel="stylesheet" href="/styles/createRecipeStyle.css">
<link rel="stylesheet" href="/styles/errorMessageStyle.css">
</head>
<body>
<!-- Background image -->
<img id="background" src="/images/foodBackground.jpg" alt="">
<div id="newRecipeContainer">
<div id="closeButtonContainer">
<div id="backButton"><a id="back" href="/recipes/myRecipes">← My Recipes</a></div>
</div>
<form id="createRecipeForm" action="/recipes/createRecipe" method="POST" enctype="multipart/form-data">
<label id="formSubHeading">Create Your Homemade Recipe</label>
<%- include('../_partial/_messages'); -%>
<div id="recipeNameContainer">
<label id="recipeNameLabel">Title</label>
<input id="recipeNameInput" type="text" name="recipeName">
</div>
<div id="recipeImage">
<label id="recipeImageLabel">Add An Image of Your Meal</label>
<input id="recipeImageInput" type="file" accept="image/*" name="recipeImage"/>
<label id="recipeImageInputLabel" for="recipeImageInput" name="recipeImage">Choose A File</label>
</div>
<div id="recipeDescription">
<label id="recipeDescriptionLabel">Description</label>
<textarea id="recipeDescriptionInput" name="recipeDescription" cols="30" rows="10" maxlength="2000"></textarea>
</div>
<div class="ingredientsContainer">
<label id="ingredientsLabel">Ingredients</label>
<button id="addIngredientButton" type="button" onClick="addIngredient('allIngredients');">Add Another Ingredient</button>
<div id="allIngredients">
<div class="ingredientSet">
<input class="ingredientInput" type="text" name="ingredients[]">
</div>
</div>
</div>
<div class="directionsContainer">
<label id="directionsLabel">Directions</label>
<button id="addDirectionButton" type="button" onClick="addDirection('allDirections');">Add Another Direction</button>
<div id="allDirections">
<div class="directionSet">
<input class="directionInput" type="text" name="directions[]">
</div>
</div>
</div>
<div id="createRecipeButtonContainer">
<button id="createRecipeButton" type="submit">Create Recipe</button>
</div>
</form>
</div>
</body>
<!-- Required scripts to run app -->
<script src="/controls/newRecipeControl.js"></script>
<script src="/controls/errorMessageControl.js"></script>
</html>
Thanks for any help.谢谢你的帮助。
In your code you are using getElementById
but there is no id
called directionSet
its a class.在您的代码中,您使用的是
getElementById
,但没有名为directionSet
的id
,它是 class。
You can simply use parentElement and remove to remove the newly added dynamic inputs by calling an onClick
function.您可以通过调用
onClick
function 简单地使用parentElement和remove来删除新添加的动态输入。
In the onClick
function removeElement()
- this
refers to the elements we have clicked and it will remove from the form.在
onClick
function removeElement()
- this
是指我们单击的元素,它将从表单中删除。
var ingCounter = 1; var dirCounter = 1; var limit = 10; function addIngredient(divName) { if (ingCounter == limit) { alert("You have reached the add limit"); } else { var newdiv = document.createElement('div'); newdiv.innerHTML = "<div class='ingredientSet'><input class='ingredientInput' type='text' name='ingredients[]'><button class='deleteIngredientButton' type='button' onClick='removeElement(this);'>X</button></div>"; document.getElementById(divName).appendChild(newdiv); ingCounter++; } } function addDirection(divName) { if (dirCounter == limit) { alert("You have reached the add limit"); } else { var newdiv = document.createElement('div'); newdiv.innerHTML = "<div class='directionSet'><input class='directionInput' type='text' name='directions[]'><button class='deleteDirectionButton' onClick='removeElement(this);' type='button'>X</button></div>"; document.getElementById(divName).appendChild(newdiv); dirCounter++; } } function removeElement(elementId) { // Removes an element from the document elementId.parentElement.remove() }
<,DOCTYPE html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1;0"> <title>Homemade</title> </head> <body> <;-- Background image --> <div id="newRecipeContainer"> <div id="closeButtonContainer"> <div id="backButton"><a id="back" href="/recipes/myRecipes">← My Recipes</a></div> </div> <form id="createRecipeForm" action="/recipes/createRecipe" method="POST" enctype="multipart/form-data"> <label id="formSubHeading">Create Your Homemade Recipe</label> <div id="recipeNameContainer"> <label id="recipeNameLabel">Title</label> <input id="recipeNameInput" type="text" name="recipeName"> </div> <div id="recipeImage"> <label id="recipeImageLabel">Add An Image of Your Meal</label> <input id="recipeImageInput" type="file" accept="image/*" name="recipeImage" /> <label id="recipeImageInputLabel" for="recipeImageInput" name="recipeImage">Choose A File</label> </div> <div id="recipeDescription"> <label id="recipeDescriptionLabel">Description</label> <textarea id="recipeDescriptionInput" name="recipeDescription" cols="30" rows="10" maxlength="2000"></textarea> </div> <div class="ingredientsContainer"> <label id="ingredientsLabel">Ingredients</label> <button id="addIngredientButton" type="button" onClick="addIngredient('allIngredients');">Add Another Ingredient</button> <div id="allIngredients"> <div class="ingredientSet"> <input class="ingredientInput" type="text" name="ingredients[]"> </div> </div> </div> <div class="directionsContainer"> <label id="directionsLabel">Directions</label> <button id="addDirectionButton" type="button" onClick="addDirection('allDirections');">Add Another Direction</button> <div id="allDirections"> <div class="directionSet"> <input class="directionInput" type="text" name="directions[]"> </div> </div> </div> <div id="createRecipeButtonContainer"> <button id="createRecipeButton" type="submit">Create Recipe</button> </div> </form> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.