I am new to JavaScript an I have a basic set up where I can append a div with another div. I am trying to create a button that lets me remove those divs that are added dynamically, these are the two functions:
$("#add_new").click(function(){
event.preventDefault();
clicks += 1;
if (clicks < 10)
{
//document.getElementById("total_steps_count").innerHTML = clicks;
$("#steps").append('<div id="remove"><input type="text" id="step_title" class="form-control" name="step_title[]" placeholder="Enter a title for this step"><br><input type="file" id="step_image" name="step_image[]" ><br><input type="text" class="form-control" id="step_caption" name="image_caption[]" placeholder="Enter a caption for this image"><br><input type="text" id="step_text" name="step_text[]" class="form-control" placeholder="Walk us through this step"><br><button class="btn btn-default" id="remove_step"><i class="fa fa-times"></i> Remove This Step</button></div><br><br><hr>')
}
else
{
alert("The maximum number of allowed steps is 10");
}
});
//Remove step
$("body").on("click", "#remove_story_step", function(){
event.preventDefault();
clicks -= 1;
$(this).closest("#remove_story").remove()
});
When the 'add_new' button is clicked, the div is properly appended to the target div, however when I click the 'remove_step' button, the page refreshes and all of the previously appended divs are gone.
Like I say I am new to JavaScript/jQuery so I'm not sure how I can debug this, any help would be greatly appreciated!
