CODEWITHSUNDEEP
javascriptjquery
Alex
Alex

Reputation: 12171

Delete drop down when it is blank using Javascript or Jquery

Is it possible to write a Javascript function to delete a drop down when it is blank?

<form name="myform" method="post" enctype="multipart/form-data" action="" id="myform">
<div>
<label id="question1">1) Draw recognizable shapes</label>
        <br />
<input type="radio" value="Yes" id="question1_0" name="question1_0" />
        Yes
<input type="radio" value="No" id="question1_1" name="question1_1" />
        No
</div>
<div>
<label id="question2">2) Competently cut paper </label>
        <br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
        Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
        No
</div>
<div>
<label id="question3">3) Hold a pencil</label>
        <br />
<input type="radio" value="Yes" id="question3_0" name="question3_0" />
        Yes
<input type="radio" value="No" id="question3_1" name="question3_1" />
        No
</div>
<input type="submit" value="Delete Drop Down" onclick="return checkanddelete"/>
</form>

If somebody does not select question 2 for example, it deletes question 2 label and the drop down.

Upvotes: 1

Views: 211

Answers (3)

jammykam
jammykam

Reputation: 16990

Assuming you actually meant radio button groups (and not drop down lists) then firstly your HTML is incorrect, you need to set the name values of each group of radio buttons to be the same:

<input type="radio" value="Yes" id="question1_0" name="question1" /> Yes
<input type="radio" value="No" id="question1_1" name="question1" /> No

Then you need to loop through the list of radio buttons, if none in the group are selected then delete the parent div:

$('input[type=submit]').on('click', function() {
    var radioArr = [];
    $(':radio').each(function(){
        var radName = this.name;
        if($.inArray(radName, radioArr) < 0 && $(':radio[name='+radName+']:checked').length == 0)
        {
            radioArr.push(radName);
            $(this).closest("div")
                   .remove();
        }
    });
    return false; //to stop the form submitting for testing purposes
});

While you are there, you might want to add some <label for=""> tags around your text.

Here is a jsFiddle of the solution.

Upvotes: 2

lorado
lorado

Reputation: 336

I don't know, what do you mean under "dropdown menu", but here some info, that can help you. You can set a class name for the all Objects, you want to delete. E.g.

HTML

<div>
    <label class='question2' id="question2">2) Competently cut paper </label>
        <br />
    <input class='question2' type="radio" value="Yes" id="question2_0" name="question2_0" />
        Yes
    <input class='question2' type="radio" value="No" id="question2_1" name="question2_1" />
        No
</div>

JS

$(".question2").remove();

As an another solution you can set an ID for the DIV Tag above all of this elements

<div id='block_to_remove'>
    <label id="question2">2) Competently cut paper </label>
        <br />
    <input type="radio" value="Yes" id="question2_0" name="question2_0" />
        Yes
    <input type="radio" value="No" id="question2_1" name="question2_1" />
        No
</div>

And then remove it in JS

$("#block_to_remove").remove();

Upvotes: 0

Brett Weber
Brett Weber

Reputation: 1907

If your dropdown has an id of DropDown, and you are looking to hide the dropdon on submit click:

function checkanddelete()
{
   if ( $('#question2_0.=:checked, #question2_1:checked').length )
      $('#dropdown').hide() // Or $('#dropdown').remove() if you do not plan on showing it again.
   return false; // if you plan on not submitting the form.. 
}

Optimization for use in a module for a page include adding appropriate ids and classes to the divs, which I'm assuming that in full code are there, but if you are planning on making UI adjustments I would advise against using a submit button in the mix..

Upvotes: 0

Related Questions