I'm having an issue with a form I created that duplicates itself - I can't seem to get the 'x' button to remove the corresponding div as needed.
I have placed both buttons outside of the div like this:
<button type="button" id="cross" class="buttonImgTop" onclick="remChild()"></button>
<div id="ValuWrapper"> ...content goes here... </div>
<button type="button" class="buttonImg" onclick="repeat()"></button>
Every time the '+' sign is clicked to add more forms on the website, the 'x' button and 'div' are cloned and duplicated.
Below is the code for cloning the form and removing it:
<script>
var i = 0;
var original = document.getElementById('ValuWrapper');
var crossButton = document.getElementById('cross');
var n = 0;
function repeat() {
var clone = original.cloneNode(true);
var crossBut = crossButton.cloneNode(true);
clone.id = "ValuWrapper" + ++i;
crossBut.id = "cross" + i;
crossButton.parentNode.appendChild(crossBut);
original.parentNode.appendChild(clone);
n = i;
}
function remChild(){
for(i = 0; i <= n; i +=1)
{
$("#cross"+[i]).click(function () {
$("#ValuWrapper"+[i]).slideUp(400, function () {
$("#ValuWrapper"+[i]).remove();
$(this).remove();
});
});
}
}
</script>
I want the 'x' button to trigger the animation 'slideUp()' on the specified div, then remove both the button and div in any order the client prefers. But it doesn't seem to be working as intended.