How to remove an attribute

Question

0.00/5 (No votes)

See more:

html:

<p id="addBtn" onclick="addSkill()">Add Skill</p>
<button id="cancelBtn" onclick="redirect()">Cancel</button>
<div id="skillDiv">
<input type='text' id='skill' required>
</div>

javascript:

function addSkill(){
    var line1 = "<input type='text' id='skill' required>";
    document.getElementById('skillDiv').innerHTML+=line1;
}

function redirect(){
    document.getElementById("skill").removeAttribute("required");
    //redirect to differentpage
}

What I have tried:

Hello, I am trying to remove a "required" attribute from an input element. It works when it is applied to the direct html but does't when the element was created with innerHTML. How can I overcome this?

Posted 10-Jun-23 19:12pm

Allysha April

Updated 10-Jun-23 23:59pm

Add a Solution

Comments

Member 15627495 11-Jun-23 1:46am

with the provide code, it's a dual ( two ) tags with same Id...
it goes bug like this..

Id's are lost when in double.

function addSkill(){

    document.getElementById('skillDiv').innerHTML+= "<input type='text' id='skill' required>";
}

function redirect(){
    document.getElementById("skill").removeAttribute("required"); // there are two tags  'skill' so 
    // so DOM have an array with 2 slots.
    // watch your code by 'dev tools', you will see two tags 'id=skill'

}

Member 15627495 11-Jun-23 2:44am

if you want multiple input for different skills :

<input name="skills[]" type="text">
<input name="skills[]" type="text">
<input name="skills[]" type="text">
<input name="skills[]" type="text">

//  this way you can have a output for all the skills value, in the array 'skills'

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Accepted Answer · 2023-06-10T23:59:00

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() {
//Creates the text element with a REQUIRED ATTRIBUTE...
  var line1 = "<input type='text' class='skill-input' required>";
  document.getElementById('skillDiv').innerHTML += line1;
}

function redirect() {
  var skillInputs = document.getElementsByClassName("skill-input");
//Get all of the text elements with SKILL-INPUT class and remove REQUIRED ATTRIBUTE...
  for (var i = 0; i < skillInputs.length; i++) {
    skillInputs[i].removeAttribute("required");
  }
  // Redirect to a different page
}
</script>

I have a working fiddle for you at Remove attribute from elements using getElementsByClassName [^]