0

So I Have Looked Through The Site Only To Not Find The Answer For My Particular Problem. I Am Pretty New To Writing Code And Am Trying To Figure Out How To Remove A Form Field After Its Been Added with Javascript. Here is the code. I would Greatly Appreciate Feedback/Solutions.

var counter = 1;
var limit = 1000;
function addInput(Favorites){
       if (counter == limit)  {
            alert("You have reached the limit of adding " + counter + " inputs");
       }
       else {
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "<br>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove'>";
            document.getElementById(Favorites).appendChild(newdiv);
            counter++;

      }

      function removeInput(newdiv){
          document.getElementById('Favorites').removeChild(newdiv);
          counter - 1;
      }
}
  <form>
       <div id="Favorites">
            Favorite 1<input type="text" name="Favorites[]">
       </div>
      <input type="button" value="Add New Favorite" onClick="addInput('Favorites');">
      <input type = "button" value = "Save Changes">
</form>

Improve this question
2
  • 1
    for the record counter - 1 probably isn't doing what you think it is. Try using counter -= 1 to actually update your variable or counter-- would also work Commented Mar 15, 2017 at 20:33
  • The main problem is that your "Remove" buttons have no event associated with them. Commented Mar 15, 2017 at 20:40

2 Answers 2

Reset to default
2

there are various issues in your code so I have modified it a bit. So use following js code 

var counter = 1;
var limit = 1000;
function addInput(){
   if (counter == limit)  {
        alert("You have reached the limit of adding " + counter + " inputs");
   }
   else {
            var newdiv = document.createElement('div');
            newdiv.innerHTML = " <div class='inputElement'>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove' onClick='removeInput(this)'></div>";
            document.getElementById("Favorites").appendChild(newdiv);
            counter++;
     }
}

function removeInput(removeLink){
   var inputElement = removeLink.parentNode;
  inputElement.remove();
  counter= counter - 1;  
}

In html you can modify your code a bit 

 <form>
   <div id="Favorites">
     <div class='inputElement'>   
        Favorite 1<input type="text" name="Favorites[]">
     </div>  
    </div>
      <input type="button" value="Add New Favorite" onClick="addInput();">
     <input type = "button" value = "Save Changes">
</form>

Check out above code here
https://jsbin.com/hizimateri/1/edit?html,js,console,output

If you have any issues with it . Let me know.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks For This, It Worked Perfectly, A Couple Questions Though So I Can Understand Why You Did What You Did 1.Why did You give the removeInput function the argument of removelink? and 2. What Was The Purpose Of Adding A Class To The Div Tag?
Answer1. This works as a reference to that link. As there can be more than one 'remove' link on this page. On clicking one of these you want to remove that particular link with its sibling input box (not all of these from page). Answer 2 On clicking remove - you have to remove that link and its sibling input box so here I am using a parent container so now I just need to remove that parent div. Hope it helps!
I was thinking to use that class in code but it's of no use currently.
I Did, But Since I have Less Than 15 Rep, It Doesnt Show Publicly :/
as you have created nested div, you should write var inputElement = removeLink.parentNode.parentNode; otherwise you let an empty div each time you remove one (or don't create <div class='inputElement'> and just add class to the created element var newdiv = document.createElement('div');newdiv.className='inputElement';
0

Maybe this help? Check the link here link

var counter = 1;
var limit = 2;

    function addInput(Favorites) {
      if (counter == limit) {
        removeInput();
        alert("You have reached the limit of adding " + counter + " inputs");
      } else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<br>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove'>";
        document.getElementById(Favorites).appendChild(newdiv);
        counter++;

      }

      function removeInput() {
        var x = document.querySelector('#Favorites div:last-child');
        x.remove();
        --counter;
      }
    }
Improve this answer

5 Comments

Hey, Thanks For Responding, Im Trying To Do It With Basic Javascript, I Ran The Code You Provided And It Didnt Seem To Solve My Predicament :[
@LegendaryElite can you check the codepen link and tell if is that the behaviour you want, please.
What Do You Mean By Behavior?
Have you checked the codepen link? When the counter get in two we alert and remove the input last inserted, that's it what you trying to achieve?
Oooh No, I May Have Worded The Question Weirdly. My Goal Was Trying To Get The Remove Function To Work With Basic Javascript. Like Dynamically Adding And Removing At Will.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.