CODEWITHSUNDEEP
javascriptjqueryhtml
Sushivam
Sushivam

Reputation: 3117

Jquery removing dynamic drop down removes entire parent div

I am trying to add drop down on click of button.

enter image description here

From the 2nd drop down on wards, there is a remove button , which basically will remove the drop down.

The problem is when i click the remove link, the entire div is getting removed, even the 1st drop down.

I want only that corresponding drop down to be deleted .

<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--;
            })
        });

UPDATE: The above validation check - ie) if default option is selected then the alert is thrown only for 1st drop down.

How to check for default value from the 2nd drop down.

Upvotes: 0

Views: 92

Answers (2)

lbhise
lbhise

Reputation: 136

To validate multiple dropdowns you can modify your code following way. It is working fine for me. 

   $(add_button).click(function(e){ //on add input button click
       e.preventDefault();
       //UPDATED
       var dropdowns = $('.increment');
       var isValid = true
       dropdowns.map(function(idx, dropdown) {
         if (dropdown.value === '' || dropdown.value === 'N') {
           alert(`Please select an item on position ${idx+1} dropdown and then proceed!`);
           $(dropdown).focus();

           isValid = false;
         }
      })

     if(isValid && 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>');
     }

 });

Upvotes: 0

Amit Kumar
Amit Kumar

Reputation: 5962

You missed to add <div> at the begining of append method.

Here is complete code.

$(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>');

Upvotes: 2

Related Questions