I have a button that creates two input fields on click. They also generate a font awesome trash icon and when the user clicks on the icon the two fields must get deleted. Currently my code deletes all inputs when clicking on the font awesome icon, how can I make so that only those two that belong to the icon get deleted instead of all? Here is my attempt:
createNewPricedRoundShareholder() {
var newPlatformNameInputContainer = document.getElementById(
"round-shareholder-container"
);
const newPlatformNameInput = document.createElement("input");
newPlatformNameInput.classList.add("form-control");
newPlatformNameInput.classList.add("input");
newPlatformNameInput.classList.add("dynamic-input");
newPlatformNameInput.placeholder = "Username";
newPlatformNameInput.setAttribute("type", "text");
newPlatformNameInput.setAttribute("name", "username");
newPlatformNameInputContainer.appendChild(newPlatformNameInput);
var secondContainer = document.getElementById(
"round-investment-container"
);
const newInitialOptionsPool = document.createElement("input");
newInitialOptionsPool.classList.add("form-control");
newInitialOptionsPool.classList.add("input");
newInitialOptionsPool.classList.add("dynamic-input");
newInitialOptionsPool.placeholder = "Investment";
newInitialOptionsPool.name = "investment";
newInitialOptionsPool.setAttribute("type", "text");
newInitialOptionsPool.setAttribute("name", "investment");
secondContainer.appendChild(newInitialOptionsPool);
secondContainer.innerHTML += '<i class="fas fa-trash"></i>';
document.querySelectorAll(".fa-trash").forEach(
function(el){
el.addEventListener('click', function() {
var investmentInput = document.querySelector("#round-shareholder-container");
investmentInput.parentNode.removeChild(investmentInput);
var usernameInput = document.querySelector("#round-investment-container");
usernameInput.parentNode.removeChild(usernameInput)
})
}
)
I also tried by getting each input target like that:
var A = el.target.parentNode; A.removeChild(A);
That still didn’t work
Advertisement
Answer
You can wrap the input and delete button via a wrapper and then delete the current node whenever user clicks on the delete button. I have create a demo, Check
const mainParent = document.getElementById('main-parent');
var index = 0;
function addButtonRows() {
const newPlatformNameInput1 = document.createElement("input");
newPlatformNameInput1.id = index + '_first';
newPlatformNameInput1.value = index;
const newPlatformNameInput2 = document.createElement("input");
newPlatformNameInput2.id = index + '_second';
newPlatformNameInput2.value = index;
const deleteButton = document.createElement("button");
deleteButton.innerText = 'delete';
const wrapperParent = document.createElement('div');
wrapperParent.id = index + '_parent';
wrapperParent.appendChild(newPlatformNameInput1);
wrapperParent.appendChild(newPlatformNameInput2);
wrapperParent.appendChild(deleteButton);
mainParent.appendChild(wrapperParent);
index++;
deleteButton.addEventListener('click', function(event) {
removeCurrentRow(event);
});
}
function removeCurrentRow(event) {
const parent = event.target.parentNode;
const length = parent.childNodes.length;
parent.parentNode.removeChild(parent);
}
const addButton = document.getElementById('add');
addButton.addEventListener('click', function() {
addButtonRows();
});<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="main-parent"></div> <button id="add">Add</button> </body> </html>