javascript - 动态删除字段按钮无法正常工作

Question

这是我的代码。我能够添加新字段并附加新字段和删除按钮。有两个问题。

1. 删除按钮未正确附加。它应该紧跟在每次都有力量。
2. 它应该删除每列的相关输入字段 salt 字段和 Strength 字段。

$(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

Answer 1

根据评论中的链接，最好重组htmlString。

您可以尝试以下方式:

$(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>