如何使用javascript动态删除在html中创建的输入表单
我现在陷入困境，不知道该怎么办。解决方案可能很简单，但由于我是JavaScript环境的新手，我有点迷茫 我创建了一个复选选项，当按下该选项时，它将生成一个输入表单，并用“AddNew”按钮填充，以生成另一个输入表单 在我的代码中，当按下“AddNew”按钮时，它已经创建了一个带有“Delete”按钮的动态输入表单，但是，我似乎无法使这个“Delete”禁令在按下时起作用 欢迎一切帮助。我正在使用html和JavaScript。最终，我将使用pup作为中间人将这些表单值保存在sql数据库中 PS：我正在使用WordPress作为web开发工具，因为页面已经在其中创建，是的，我知道除了主html页面之外，我还应该使用JavaScript和CSS 以下是我目前掌握的代码：如何使用javascript动态删除在html中创建的输入表单,javascript,php,html,Javascript,Php,Html,我现在陷入困境，不知道该怎么办。解决方案可能很简单，但由于我是JavaScript环境的新手，我有点迷茫 我创建了一个复选选项，当按下该选项时，它将生成一个输入表单，并用“AddNew”按钮填充，以生成另一个输入表单 在我的代码中，当按下“AddNew”按钮时，它已经创建了一个带有“Delete”按钮的动态输入表单，但是，我似乎无法使这个“Delete”禁令在按下时起作用 欢迎一切帮助。我正在使用html和JavaScript。最终，我将使用pup作为中间人将这些表单值保存在sql数据库中 PS
<!DOCTYPE html>
<html>
<style type="text/css">
label{
float:left;
width: 10em;
text-align: right;
margin-right: 10px;
}
</style>
<script type="text\javascript">
function checkform(form) {
// get all the inputs within the submitted form
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
// only validate the inputs that have the required attribute
if(inputs[i].hasAttribute("required")){
if(inputs[i].value == ""){
// found an empty field that is required
alert("Please fill all required fields");
return false;
}
}
}
return true;
}
</script>
<script type="text/javascript">
//This function adds another form input when button "Add" is pressed
var counter = 1;
var limit = 5;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " Co-PI or Co-Investigators");
}
else {
var divName = divName;
var newDivName = (divName + counter);
var newdiv = document.createElement('div');
newdiv.id = "dynamicInput" + counter;
newdiv.innerHTML = (counter + 1) + ". Co-PI or Co-Investigator Information: <br>" +
"<label>First Name : </label><input type='text' name='fname[]' maxlength='35' required><br> " +
"<label>Last Name : </label><input type='text' name='lname[]' maxlength='35'><br> " +
"<label>Degree : </label><input type='text' name='degree[]' maxlength='10'><br> " +
"<label>Current Position : </label><input type='text' name='cPos[]' maxlength='30'><br> " +
"<label>Institution : </label><input type='text' name='inst[]' maxlength='40'><br> " +
"<label>School : </label><input type='text' name='school[]' maxlength='40'><br> " +
"<label>Department : </label><input type='text' name='depart[]' maxlength='40'><br> " +
"<label>Program : </label><input type='text' name='program[]' maxlength='40'><br> " +
"<label>Email : </label><input type='text' name='email[]' maxlength='255'><br> " +
"<label>Phone (xxx-xxx-xxxx) : </label><input type='text' name='phone[]' maxlength='10'> <br><br>" +
"<input type='button' value='Delete Previous Form' onClick='removeForm(divName, newDivName);'> ";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
//Delete div form when delete button is pressed
function removeForm(parentDiv, childDiv){
if(childDiv == parentDiv)
{
alert("Cannot delete anymore form entries!");
}
else if (document.getElementById(childDiv))
{
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv)
parent.removeChild(child);
counter--;
}
else
{
alert("Form has been removed or does not exist.");
return false;
}
}
</script>
<script type="text/javascript">
function aff_div(ladiv) {
document.getElementById(ladiv).style.display = "inline";
}
function cach_div(ladiv) {
document.getElementById(ladiv).style.display = "none";
}
function affich_conj() {
if (document.forms.CoPI_CoInv_Info.yesNoChkbox[0].checked == true) {
aff_div("dynamicInput");
aff_divBtn("btn_New_CoPI_Inv");
}
if (document.forms.CoPI_CoInv_Info.yesNoChkbox[1].checked == true) {
cach_div("dynamicInput");
cach_divBtn("btn_New_CoPI_Inv");
}
}
function aff_divBtn(BtnDiv) {
document.getElementById(BtnDiv).style.display = "inline";
}
function cach_divBtn(BtnDiv) {
document.getElementById(BtnDiv).style.display = "none";
}
</script>
<form id="CoPI_CoInv_Info" onsubmit="return checkform(this)">
<label1>Do you want to add a Co-PI or Co-Investigator? </label1>
<input type="radio" name="yesNoChkbox" value="yes" onclick="affich_conj();"> yes
<input type="radio" name="yesNoChkbox" value="no" checked="checked" onclick="affich_conj();"> no
<br><br>
<div id="dynamicInput">
1. Co-PI or Co-Investigator Information: <br>
<label>First Name : </label><input type="text" name="fname[]" maxlength="35" required><br>
<label>Last Name : </label><input type="text" name="lname[]" maxlength="35"><br>
<label>Degree : </label><input type="text" name="degree[]" maxlength="10"><br>
<label>Current Position : </label><input type="text" name="cPos[]" maxlength="30"><br>
<label>Institution : </label><input type="text" name="inst[]" maxlength="40"><br>
<label>School : </label><input type="text" name="school[]" maxlength="40"><br>
<label>Department : </label><input type="text" name="depart[]" maxlength="40"><br>
<label>Program : </label><input type="text" name="program[]" maxlength="40"><br>
<label>Email : </label><input type="text" name="email[]" maxlength="255"><br>
<label>Phone (xxx-xxx-xxxx) : </label><input type="text" name="phone[]" maxlength="10"> <br><br>
</div>
<divBtn id="btn_New_CoPI_Inv">
<input type="button" value="Add New Co-PI or Co-Investigator..." onClick="addInput('dynamicInput');">
</divBtn>
</form>
<script type="text/javascript">
cach_div("dynamicInput");
cach_divBtn("btn_New_CoPI_Inv");
</script>
</html>
标签{
浮动：左；
宽度：10em；
文本对齐：右对齐；
右边距：10px；
}
功能检查表（表格）{
//获取提交表单中的所有输入
var inputs=form.getElementsByTagName（“输入”）；
对于（变量i=0；i”+
“名字：
”+
“姓氏：
”+
“学位：
”+
“当前位置：
”+
“机构：
”+
“学校：
”+
“部门：
”+
“程序：
”+
“电子邮件：
”+
“电话（xxx xxx xxxx）：
”+
" ";
document.getElementById（divName）.appendChild（newdiv）；
计数器++；
}
}
//按下删除按钮时删除div表单
函数removeForm（parentDiv、childDiv）{
if（childDiv==parentDiv）
{
警报（“无法再删除表单条目！”）；
}
else if（document.getElementById（childDiv））
{
var child=document.getElementById（childDiv）；
var parent=document.getElementById（parentDiv）
父母。removeChild（子女）；
计数器--；
}
其他的
{
警告（“表单已被删除或不存在”）；
返回false；
}
}
职能助理消防处（ladiv）{
document.getElementById（ladiv.style.display=“inline”；
}
功能cach_分区（ladiv）{
document.getElementById（ladiv.style.display=“无”；
}
函数affich_conj（）{
if（document.forms.CoPI\u CoInv\u Info.yesNoChkbox[0]。选中==true）{
办公楼分区（“动态投入”）；
aff_divBtn（“btn_New_CoPI_Inv”）；
}
if（document.forms.CoPI\u CoInv\u Info.yesNoChkbox[1]。checked==true）{
cach_div（“dynamicInput”）；
cach_divBtn（“btn_New_CoPI_Inv”）；
}
}
功能aff_divBtn（BtnDiv）{
document.getElementById（BtnDiv.style.display=“inline”；
}
函数cach_divBtn（BtnDiv）{
document.getElementById（BtnDiv.style.display=“无”；
}
您想添加联合PI还是联合调查员？
对
不
1.联合PI或联合调查员信息：
名字：
姓氏：
学位：
当前职位：
机构：
学校：
部门：
节目：
电子邮件：
电话（xxx xxx xxxx）：
cach_div（“dynamicInput”）；
cach_divBtn（“btn_New_CoPI_Inv”）；
var divName = divName;
var newDivName = (divName + counter);
var newdiv = document.createElement('div');
newdiv.id = "dynamicInput" + counter;
newdiv.innerHTML = (counter + 1) + ". Co-PI or Co-Investigator Information: <br>" +
"<label>First Name : </label><input type='text' name='fname[]' maxlength='35' required><br> " +
"<label>Last Name : </label><input type='text' name='lname[]' maxlength='35'><br> " +
"<label>Degree : </label><input type='text' name='degree[]' maxlength='10'><br> " +
"<label>Current Position : </label><input type='text' name='cPos[]' maxlength='30'><br> " +
"<label>Institution : </label><input type='text' name='inst[]' maxlength='40'><br> " +
"<label>School : </label><input type='text' name='school[]' maxlength='40'><br> " +
"<label>Department : </label><input type='text' name='depart[]' maxlength='40'><br> " +
"<label>Program : </label><input type='text' name='program[]' maxlength='40'><br> " +
"<label>Email : </label><input type='text' name='email[]' maxlength='255'><br> " +
"<label>Phone (xxx-xxx-xxxx) : </label><input type='text' name='phone[]' maxlength='10'> <br><br>" +
"<input type='button' value='Delete Previous Form' onClick='removeForm(\""+divName+"\", \""+newDivName+"\");'> ";
<input type='button' value='Delete Previous Form' onClick='removeForm(event);'>
您需要引用并转义字符串中的变量~查看内联事件处理程序
var divName = divName;
var newDivName = (divName + counter);
var newdiv = document.createElement('div');
newdiv.id = "dynamicInput" + counter;
newdiv.innerHTML = (counter + 1) + ". Co-PI or Co-Investigator Information: <br>" +
"<label>First Name : </label><input type='text' name='fname[]' maxlength='35' required><br> " +
"<label>Last Name : </label><input type='text' name='lname[]' maxlength='35'><br> " +
"<label>Degree : </label><input type='text' name='degree[]' maxlength='10'><br> " +
"<label>Current Position : </label><input type='text' name='cPos[]' maxlength='30'><br> " +
"<label>Institution : </label><input type='text' name='inst[]' maxlength='40'><br> " +
"<label>School : </label><input type='text' name='school[]' maxlength='40'><br> " +
"<label>Department : </label><input type='text' name='depart[]' maxlength='40'><br> " +
"<label>Program : </label><input type='text' name='program[]' maxlength='40'><br> " +
"<label>Email : </label><input type='text' name='email[]' maxlength='255'><br> " +
"<label>Phone (xxx-xxx-xxxx) : </label><input type='text' name='phone[]' maxlength='10'> <br><br>" +
"<input type='button' value='Delete Previous Form' onClick='removeForm(\""+divName+"\", \""+newDivName+"\");'> ";
<input type='button' value='Delete Previous Form' onClick='removeForm(event);'>
尝试要删除的Div的pass id：
newdiv.id = "dynamicInput" + counter;
newdiv.innerHTML = (counter + 1) + "... <input type='button' value='Delete Previous Form' onClick='removeForm(\"dynamicInput\"" + counter");'>";
尝试使用要删除的Div的pass id：
newdiv.id = "dynamicInput" + counter;
newdiv.innerHTML = (counter + 1) + "... <input type='button' value='Delete Previous Form' onClick='removeForm(\"dynamicInput\"" + counter");'>";
佩雷尔菲特！变量的引用解决了我的问题。这帮了大忙！非常感谢你！很棒的社区！佩雷尔菲特！变量的引用解决了我的问题。这帮了大忙！非常感谢你！很棒的社区！谢谢，我试过了，但我觉得我做错了什么，因为它不适合我。尽管如此，我们在stackoverflow的一位队友还是为我们解决了这个问题。我对你感激不尽。泰！谢谢，我试过了，但我觉得我做错了什么，因为它不适合我。尽管如此，我们在stackoverflow的一位队友还是为我们解决了这个问题。我对你感激不尽。泰！