无法使用 removeChild 删除我的 2 个 INPUT 字段
Can not delete my 2 INPUT fields with removeChild
经过多次测试,我找不到如何删除我的 2 个字段 INPUT、文本和数字。
当我点击带有 class "buttonAdd" 和 createElement 的按钮时,我创建了 3 个字段,这创建了 2 个字段 INPUT 和 1 个字段 IMG "which is the icon for deleted".
请问,当我点击我的 IMG 图标时,如何删除我的 2 个字段 INPUT "objetInputSuivant" 和 "poidsInputSuivant"?
我用 removeChild 和 parentElement 进行了测试,但我做不到
我删除了对 post 代码的测试
const NewInputCampement = (function() {
let i = 2;
return function NewInputCampement() {
i++;
if (document.getElementById("AddChampCampement").childNodes.length < 39) {
let Objet = document.createElement("INPUT");
let Poids = document.createElement("INPUT");
let Supprimer = document.createElement("IMG");
Supprimer.className = "SupprimerStyle";
Supprimer.src = "assets/img/supprimer.png";
Supprimer.id = "SupprimerCampement_" + i;
Supprimer.alt = "supprimer";
Supprimer.onclick = function() {
SupprimerChamp();
} // for IE
Supprimer.setAttribute('onclick', 'SupprimerChamp();'); // for FF
document.getElementById("AddChampCampement").appendChild(Supprimer);
Objet.type = "text";
Objet.className = "objetInput";
Objet.placeholder = "OBJET";
Objet.id = "textCampement_" + i;
Objet.onkeyup = function() {
this.value = this.value.toUpperCase();
}
Objet.maxLength = 18;
document.getElementById("AddChampCampement").appendChild(Objet);
Poids.type = "number";
Poids.className = "poidsInput";
Poids.placeholder = "POIDS";
Poids.name = "valInputCampement";
Poids.id = "poidsCampement_" + i;
Poids.onkeypress = function() {
return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
}
Poids.onkeyup = function() {
TotalCalcul();
limit(this);
}
document.getElementById("AddChampCampement").appendChild(Poids);
}
}
})()
<form class="inputBlock">
<input class="objetInput" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInput" type="number" name="valInputCampement" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">
<input class="objetInputSuivant" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInputSuivant" type="number" name="valInputCampement" id="poidsCampement_2" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">
<div id="AddChampCampement"></div>
<button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInputCampement()">AJOUTER UN OBJET</button>
<input class="totalInput" type="number" id="totalCampement" value="0" readonly>
</form>
Say, how to remove my 2 fields INPUT "objetInputSuivant" and
"poidsInputSuivant" when I click on my IMG icon?
parentElement.removeChild()
是正确的方法:
const NewInputCampement = (function() {
let i = 2;
return function NewInputCampement() {
i++;
if (document.getElementById("AddChampCampement").childNodes.length < 39) {
let Objet = document.createElement("INPUT");
let Poids = document.createElement("INPUT");
let Supprimer = document.createElement("IMG");
Supprimer.className = "SupprimerStyle";
Supprimer.src = "assets/img/supprimer.png";
Supprimer.id = "SupprimerCampement_" + i;
Supprimer.alt = "supprimer";
Supprimer.addEventListener("click", function() {
// Get parent element of elements to be removed
let parent = document.getElementById("AddChampCampement");
// Remove each of the children
parent.removeChild(Objet);
parent.removeChild(Poids);
parent.removeChild(this);
});
document.getElementById("AddChampCampement").appendChild(Supprimer);
Objet.type = "text";
Objet.className = "objetInput";
Objet.placeholder = "OBJET";
Objet.id = "textCampement_" + i;
Objet.onkeyup = function() {
this.value = this.value.toUpperCase();
}
Objet.maxLength = 18;
document.getElementById("AddChampCampement").appendChild(Objet);
Poids.type = "number";
Poids.className = "poidsInput";
Poids.placeholder = "POIDS";
Poids.name = "valInputCampement";
Poids.id = "poidsCampement_" + i;
Poids.onkeypress = function() {
return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
}
Poids.onkeyup = function() {
TotalCalcul();
limit(this);
}
document.getElementById("AddChampCampement").appendChild(Poids);
}
}
})()
<form class="inputBlock">
<input class="objetInput" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInput" type="number" name="valInputCampement" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">
<input class="objetInputSuivant" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInputSuivant" type="number" name="valInputCampement" id="poidsCampement_2" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">
<div id="AddChampCampement"></div>
<button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInputCampement()">AJOUTER UN OBJET</button>
<input class="totalInput" type="number" id="totalCampement" value="0" readonly>
</form>
而且(仅供参考),看在上帝的份上,stop using inline HTML event handlers, separate your HTML from your JavaScript, and follow modern standards by using .addEventListener()
。
经过多次测试,我找不到如何删除我的 2 个字段 INPUT、文本和数字。
当我点击带有 class "buttonAdd" 和 createElement 的按钮时,我创建了 3 个字段,这创建了 2 个字段 INPUT 和 1 个字段 IMG "which is the icon for deleted".
请问,当我点击我的 IMG 图标时,如何删除我的 2 个字段 INPUT "objetInputSuivant" 和 "poidsInputSuivant"?
我用 removeChild 和 parentElement 进行了测试,但我做不到
我删除了对 post 代码的测试
const NewInputCampement = (function() {
let i = 2;
return function NewInputCampement() {
i++;
if (document.getElementById("AddChampCampement").childNodes.length < 39) {
let Objet = document.createElement("INPUT");
let Poids = document.createElement("INPUT");
let Supprimer = document.createElement("IMG");
Supprimer.className = "SupprimerStyle";
Supprimer.src = "assets/img/supprimer.png";
Supprimer.id = "SupprimerCampement_" + i;
Supprimer.alt = "supprimer";
Supprimer.onclick = function() {
SupprimerChamp();
} // for IE
Supprimer.setAttribute('onclick', 'SupprimerChamp();'); // for FF
document.getElementById("AddChampCampement").appendChild(Supprimer);
Objet.type = "text";
Objet.className = "objetInput";
Objet.placeholder = "OBJET";
Objet.id = "textCampement_" + i;
Objet.onkeyup = function() {
this.value = this.value.toUpperCase();
}
Objet.maxLength = 18;
document.getElementById("AddChampCampement").appendChild(Objet);
Poids.type = "number";
Poids.className = "poidsInput";
Poids.placeholder = "POIDS";
Poids.name = "valInputCampement";
Poids.id = "poidsCampement_" + i;
Poids.onkeypress = function() {
return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
}
Poids.onkeyup = function() {
TotalCalcul();
limit(this);
}
document.getElementById("AddChampCampement").appendChild(Poids);
}
}
})()
<form class="inputBlock">
<input class="objetInput" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInput" type="number" name="valInputCampement" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">
<input class="objetInputSuivant" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInputSuivant" type="number" name="valInputCampement" id="poidsCampement_2" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">
<div id="AddChampCampement"></div>
<button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInputCampement()">AJOUTER UN OBJET</button>
<input class="totalInput" type="number" id="totalCampement" value="0" readonly>
</form>
Say, how to remove my 2 fields INPUT "objetInputSuivant" and "poidsInputSuivant" when I click on my IMG icon?
parentElement.removeChild()
是正确的方法:
const NewInputCampement = (function() {
let i = 2;
return function NewInputCampement() {
i++;
if (document.getElementById("AddChampCampement").childNodes.length < 39) {
let Objet = document.createElement("INPUT");
let Poids = document.createElement("INPUT");
let Supprimer = document.createElement("IMG");
Supprimer.className = "SupprimerStyle";
Supprimer.src = "assets/img/supprimer.png";
Supprimer.id = "SupprimerCampement_" + i;
Supprimer.alt = "supprimer";
Supprimer.addEventListener("click", function() {
// Get parent element of elements to be removed
let parent = document.getElementById("AddChampCampement");
// Remove each of the children
parent.removeChild(Objet);
parent.removeChild(Poids);
parent.removeChild(this);
});
document.getElementById("AddChampCampement").appendChild(Supprimer);
Objet.type = "text";
Objet.className = "objetInput";
Objet.placeholder = "OBJET";
Objet.id = "textCampement_" + i;
Objet.onkeyup = function() {
this.value = this.value.toUpperCase();
}
Objet.maxLength = 18;
document.getElementById("AddChampCampement").appendChild(Objet);
Poids.type = "number";
Poids.className = "poidsInput";
Poids.placeholder = "POIDS";
Poids.name = "valInputCampement";
Poids.id = "poidsCampement_" + i;
Poids.onkeypress = function() {
return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
}
Poids.onkeyup = function() {
TotalCalcul();
limit(this);
}
document.getElementById("AddChampCampement").appendChild(Poids);
}
}
})()
<form class="inputBlock">
<input class="objetInput" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInput" type="number" name="valInputCampement" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">
<input class="objetInputSuivant" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInputSuivant" type="number" name="valInputCampement" id="poidsCampement_2" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">
<div id="AddChampCampement"></div>
<button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInputCampement()">AJOUTER UN OBJET</button>
<input class="totalInput" type="number" id="totalCampement" value="0" readonly>
</form>
而且(仅供参考),看在上帝的份上,stop using inline HTML event handlers, separate your HTML from your JavaScript, and follow modern standards by using .addEventListener()
。