javascript - Jquery 删除动态下拉菜单会删除整个父 div

Question

我正在尝试添加点击按钮时的下拉菜单。

从病房的第二个下拉菜单中，有一个删除按钮，基本上会删除下拉菜单。

问题是当我点击删除链接时，整个 div 都被删除，甚至是第一个下拉列表。

我只想删除相应的下拉菜单。

<div class="row myccccccbackground" style="padding: 5px;margin: 265px 0 6px;"><span class="content_shorting">&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $this->translate('Call for action button 1');?><img class="Text_Action_bt1_tooltip" data-toggle="tooltip" data-placement="right" style="margin: 0px 0px -7px 3px;" src="<?=$this->basePath()?>/images/info_icon_grey.png"></span><br/><br/>
      <br> &nbsp;&nbsp;&nbsp;&nbsp;

     <button type='button' id = "btnAdd" style="position: relative;bottom: 24px;" >Add another...</button><br/><br/>
        <div class="fields_action"><br>
            <select id="action" class="increment" style="position: relative;bottom: 32px;">
                <option value="N">Select Action</option>
                <option value="Y">SMS</option>
                <option value="Y">Call</option>
                <option value="Y">Call Back</option>
                <option value="Y">Email</option>
                <option value="Y">Website </option>
             </select><br/>
        <span style="color:red;" class="key-error-class"  id="key_error_1" ></span>
        <span id="valueResponse_1" class="valueResponse-class"></span>
    </div>
</div>

JS:

$(document).ready(function() {
            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $(".fields_action"); //Fields wrapper
            var add_button      = $("#btnAdd"); //Add button ID

            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            var actionid = $('#action');
             //UPDATED
            if (actionid.val() === '' || actionid.val() === 'N') {
                alert("Please select an item from the list and then proceed!");
                $('#action').focus();

                return false;
            }
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div><select id="action" class="increment"><option value="N">Select Action</option><option value="Y">Call</option><option value="Y">Call Back</option><option value="Y">Email</option><option value="Y">Website </option></select> &nbsp;&nbsp; <input name="TextAdPriority" class="adtitle nospaceallow integeronly" value="" type="text"><a href="#" class="remove_field">Remove</a><br/></div>');
                }

            });

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

更新:上述验证检查 - 即)如果选择默认选项，则仅针对第一个下拉菜单引发警报。

如何检查第二个下拉列表中的默认值。

Answer 1

您错过了添加<div> append开头方法。

这是完整的代码。

$(wrapper).append('<div><select id="action" class="increment"><option value="N">Select Action</option><option value="Y">Call</option><option value="Y">Call Back</option><option value="Y">Email</option><option value="Y">Website </option></select> &nbsp;&nbsp; <input name="TextAdPriority" class="adtitle nospaceallow integeronly" value="" type="text"><a href="#" class="remove_field">Remove</a><br/></div>');