Javascript block removing

Question

I really need to remove some block with the help of js. Is it possible not to hide some block, but remove it at all?

Because I have a field wich user will not be able to see if he selected "no" in my selectbox, but JQuery validation anyway sends message that this field is empty.

I have this:

     $(function () {
          $("#wichonepmtofollow").hide();

          $("#particularpmselect").change(function () {
              // find the selected one
              var selectedCountry = $(this).val();

              if (selectedCountry == "yes") {
                  $("#wichonepmtofollow").show();
              }
              // otherwise hide it
              else {
                  $("#wichonepmtofollow").hide();
              }
          });
      });

And this:

<div id="wichonepmtofollow">
    <div class="section" id="inputdiv">
        <span class="fieldname">Which one?</span>
        <input type="text" id="wichonepm" name="wichonepm" title="can't be empty" class="required" minlength="1"/> <!-- Nessesary to be filled-->
           <script type="text/javascript">
               var wichonepm = new LiveValidation('wichonepm');
               wichonepm.add(Validate.Presence);
           </script>  
    </div>
    <div id="clear"></div>
</div>

Like instead of $("#pleasespecify").hide(); make something like $("#pleasespecify").remove(); or something else?

Answer 1

[Updated based on user comments]

Hold the html temporary in a variable -

if (selectedCountry == "yes") {
    $("#wichonepmtofollow").html(temHtml);
}
else {
    temHtml = $("#wichonepmtofollow").html();
    $("#wichonepmtofollow").html('');
}

Globally declare the temHtml

var temHtml;

Answer 2

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

is correct (docs here).

Or, you can empty the parent:

$("#wichonepmtofollow").empty();

EDIT (due to comments by OP):

You can keep an object you've removed, e.g.:

var savedObj = $("#pleasespecify").remove();

And then you can append it later:

$("#wichonepmtofollow").append(savedObj);

Note that this will also unbind all events that are bound to the associated DOM element. To keep all the events bound, you can use jQuery's detatch method.

Answer 3

To store html in a temporary variiable and then remove from page:

var tempHtml;//declare tempHtml outside other script code so it's available later

then, instead of $("#wichonepmtofollow").hide(); use this:

 tempHtml = $("#wichonepmtofollow").html();
 $("#wichonepmtofollow").html(''); //empty the container

To reinstate the html later:

 $("#wichonepmtofollow").html(tempHtml);

Answer 4

Hi,

there's no need to destroy anything, just enable or disable it, and it will not be validated if it's hidden:

$(function () {
      $("#wichonepmtofollow").hide();
      $('#wichonepm').attr('disabled',true);

      $("#particularpmselect").change(function () {
          // find the selected one
          var selectedCountry = $(this).val();

          if (selectedCountry == "yes") {
              $("#wichonepmtofollow").show();
              $('#wichonepm').attr('disabled',false);
          }
          // otherwise hide it
          else {
              $("#wichonepmtofollow").hide();
              $('#wichonepm').attr('disabled',true);
          }
      });
  });