CODEWITHSUNDEEP
javascriptjqueryhtml
kindacoder
kindacoder

Reputation: 163

Dynamically remove field button not working properly

Here is my code. I am able to add new field and appending the new field and remove button. There is two problem.

  1. Remove button is not appending properly. It should append just after the strength every time.
  2. It Should remove respected input fields salt field and Strength field of every column.

$(document).ready(function() {
    var max_fields = 100; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            var y = x - 1;
            $(wrapper).append('<div class="input-field col s6"><input class="salt" id="salt' + y + '" name="drugs[' + y + '][salt]" type="text" required><label for="salt' + y + '">Salt/Drugs</label></div><div class="input-field col s6"><input class="strength" id="strength' + y + '" name="drugs[' + y + '][strength]" type="text" required><label for="strength' + y + '">Strength</label></div>'+'</div>'+' <div class="s4"><a href="#" class="remove_field"><i class="material-icons">remove_circle</i></a></div>');
           
        }
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent().remove();
        x--;
    })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row input_fields_wrap"> 
                                <div class="input-field col s4">
                                    <input class="salt" id="salt" name="drugs[0][salt]" type="text" required>
                                    <label for="salt">Salt/Drugs</label>
                                </div>
                                <div class="input-field col s4">
                                    <input class="strength" id="strength" name="drugs[0][strength]" type="text" required>
                                    <label for="strength">Strength</label>
                                </div>
       
                                <div class="s4">
                                    <button class="btn btn-large light-blue add_field_button">Add more salt/drugs</button>
                                </div>
                                               
                            </div>

I want it to be like this

Upvotes: 3

Views: 109

Answers (2)

Mamun
Mamun

Reputation: 68933

Based on the link in the comment, it is better to restructure the htmlString.

You can try the following way:

$(document).ready(function() {
    var max_fields = 100; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            var y = x - 1;
            $(wrapper).prepend('<div class="input-field col s6"><input placeholder="Salt/Drugs" class="salt" id="salt' + y + '" name="drugs[' + y + '][salt]" type="text" required><input placeholder="Strength" class="strength" id="strength' + y + '" name="drugs[' + y + '][strength]" type="text" required><a href="#" class="remove_field"><i class="material-icons">remove_circle</i></a></div></div>');
           
        }
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent().remove();
        x--;
        
    })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row input_fields_wrap"> 
  <div class="input-field col s4">
      <input placeholder="Salt/Drugs" class="salt" id="salt" name="drugs[0][salt]" type="text" required>
      <input placeholder="Strength" class="strength" id="strength" name="drugs[0][strength]" type="text" required>
  </div>

  <div class="s4">
      <button class="btn btn-large light-blue add_field_button">Add more salt/drugs</button>
  </div>

</div>

Upvotes: 1

Carlos Salazar
Carlos Salazar

Reputation: 1898

Dynamically generated elements do not respond when listening the event directly, you have to listen to the DOM on them like

$(document).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent().remove();
        x--;
    })

Upvotes: 0

Related Questions