Your 'redirect()' function is not removing the "required" attribute because the 'getElementById' method is searching for an element with the ID "skill," but there are multiple elements with the same ID since you're dynamically adding new input elements in your 'addSkill()' function.
You need to change your 'getElementById' to a class attribute (getElementsByClassName ) and use value "skill-input" as per my code below(or any other name you wish) instead of using the id attribute. This allows you to select all the input elements with that class using 'getElementsByClassName' in your 'redirect()' function.
Within your redirect() function, we loop through all the elements with the "skill-input" class and remove the "required" attribute from each of them -
<p id="addBtn" onclick="addSkill()">Add Skill</p>
<button id="cancelBtn" onclick="redirect()">Cancel</button>
<div id="skillDiv">
<input type='text' class='skill-input' required>
</div>
<script>
function addSkill() {
var line1 = "<input type='text' class='skill-input' required>";
document.getElementById('skillDiv').innerHTML += line1;
}
function redirect() {
var skillInputs = document.getElementsByClassName("skill-input");
for (var i = 0; i < skillInputs.length; i++) {
skillInputs[i].removeAttribute("required");
}
}
</script>
I have a working fiddle for you at
Remove attribute from elements using getElementsByClassName[
^]