Add HTML based on Toggle Jquery

Question

I have a toggle that was just made for a class I am getting to work. I need to add in hidden HTML based upon the toggle state.. Basically it needs to submit with the form with the state of the button.. Would this be the best way to grab it? I am posting the form also.

Here is what I have.. When I click the button, it adds the example text, but I need it to go away when I click again..

 $(document).ready(function () { 

    $(".visibilitybutton").click(function(){
        $(this)
            .toggleClass("hide")
            .find("span").toggleClass("icon84 icon85")
            $('.buttons_secondary').append("<input type='hidden'>");
    });

 });

Answer 1

You can remove the html you append by id or class like so:

$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');

// Remove by class
$('.buttons_secondary').find('.hidden').remove();

// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();

Based off of your previous question, I think you should try this:

$(document).ready(function () { 
    $('.button').toggle(function() {
          var $button = $(this);

          $button.prop("title","Invisible");
          $button.find('.icon85').toggleClass('icon85 icon84');
          $('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
    }, function() {
          var $button = $(this);

          $button.prop("title","Visible");
          $button.find('.icon85').toggleClass('icon84 icon85');

          // Remove by class
          $('.buttons_secondary').find('.hidden').remove();

          // OR Remove by id
          $('.buttons_secondary').find('#hdf_Test').remove();
    });
 });

Answer 2

 $(document).ready(function () { 

     $('.visibilitybutton').toggle(function() {
          var $button = $(this);

          $button.prop("title","Invisible");
          $button.find('span').removeClass('icon84').addClass('icon85');
          $('.buttons_secondary').append('<input id="visibility_setting" class="hidden" type="hidden" />');
    }, function() {
          var $button = $(this);

          $button.prop("title","Visible");
          $button.find('span').removeClass('icon85').addClass('icon84');

          // OR Remove by id
          $('.buttons_secondary').find('#visibility_setting').remove();
    });

 });