Jquery on click hide the next added element












0















I have a button, which on every click gives the dropdown element.
Now i need to add the check box above the dropdown - which i have done, but this checkbox element should appear only for the first time.



enter image description here



The problem is , on every click, i get both dropdown associated with checkbox like below.



enter image description here



I need checkbox only for the 1st time button click- along with dropdown.
SO for the 2nd time button click, i tried to hide the checkbox, but the previous checkbox is getting hidden.



public function getPreferenceKeysAction() {
....
<div style="margin:2px 0px 15px 0px;">
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Registered Users</input><br>
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Opted Users</input><br>
}


in JS



$(add_button).click(function(e){ //on add input button click
if($("#mydd").length){
alert("The element you're testing is present.");
$("#mydd").hide();
}
else{
alert("NOt present.");

}
});









share|improve this question























  • Do you use this presented JS code to find the problem or is a part of your codes?

    – Ali Sheikhpour
    Nov 24 '18 at 12:50
















0















I have a button, which on every click gives the dropdown element.
Now i need to add the check box above the dropdown - which i have done, but this checkbox element should appear only for the first time.



enter image description here



The problem is , on every click, i get both dropdown associated with checkbox like below.



enter image description here



I need checkbox only for the 1st time button click- along with dropdown.
SO for the 2nd time button click, i tried to hide the checkbox, but the previous checkbox is getting hidden.



public function getPreferenceKeysAction() {
....
<div style="margin:2px 0px 15px 0px;">
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Registered Users</input><br>
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Opted Users</input><br>
}


in JS



$(add_button).click(function(e){ //on add input button click
if($("#mydd").length){
alert("The element you're testing is present.");
$("#mydd").hide();
}
else{
alert("NOt present.");

}
});









share|improve this question























  • Do you use this presented JS code to find the problem or is a part of your codes?

    – Ali Sheikhpour
    Nov 24 '18 at 12:50














0












0








0








I have a button, which on every click gives the dropdown element.
Now i need to add the check box above the dropdown - which i have done, but this checkbox element should appear only for the first time.



enter image description here



The problem is , on every click, i get both dropdown associated with checkbox like below.



enter image description here



I need checkbox only for the 1st time button click- along with dropdown.
SO for the 2nd time button click, i tried to hide the checkbox, but the previous checkbox is getting hidden.



public function getPreferenceKeysAction() {
....
<div style="margin:2px 0px 15px 0px;">
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Registered Users</input><br>
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Opted Users</input><br>
}


in JS



$(add_button).click(function(e){ //on add input button click
if($("#mydd").length){
alert("The element you're testing is present.");
$("#mydd").hide();
}
else{
alert("NOt present.");

}
});









share|improve this question














I have a button, which on every click gives the dropdown element.
Now i need to add the check box above the dropdown - which i have done, but this checkbox element should appear only for the first time.



enter image description here



The problem is , on every click, i get both dropdown associated with checkbox like below.



enter image description here



I need checkbox only for the 1st time button click- along with dropdown.
SO for the 2nd time button click, i tried to hide the checkbox, but the previous checkbox is getting hidden.



public function getPreferenceKeysAction() {
....
<div style="margin:2px 0px 15px 0px;">
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Registered Users</input><br>
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Opted Users</input><br>
}


in JS



$(add_button).click(function(e){ //on add input button click
if($("#mydd").length){
alert("The element you're testing is present.");
$("#mydd").hide();
}
else{
alert("NOt present.");

}
});






javascript php jquery html






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 24 '18 at 12:40









SushivamSushivam

2201416




2201416













  • Do you use this presented JS code to find the problem or is a part of your codes?

    – Ali Sheikhpour
    Nov 24 '18 at 12:50



















  • Do you use this presented JS code to find the problem or is a part of your codes?

    – Ali Sheikhpour
    Nov 24 '18 at 12:50

















Do you use this presented JS code to find the problem or is a part of your codes?

– Ali Sheikhpour
Nov 24 '18 at 12:50





Do you use this presented JS code to find the problem or is a part of your codes?

– Ali Sheikhpour
Nov 24 '18 at 12:50












2 Answers
2






active

oldest

votes


















0














Why not add a class to the element or a data attribute.



With jQuery both are easy to achive.
If you want to use a class just change data method to hasClass and addClass



just do a



$btn = $(this);
// Check if the element has data attribute used
if ( $btn.data('used') != 'true' ) {
// Add data attribute used to element
$btn.data('used', 'true')
// Do whats needed for the first time it's clicked.
} else {
// The element has been used already
}





share|improve this answer

































    0














    Change you id="mydd" to class="mydd", you should use id with a unique value, doing that you can hide the elements skipping 2 of them, like this.



    $('.mydd').slice(2).hide();


    If you want to hide the div wrapping your checkbox, add .parent()



    $('.mydd').parent().slice(1).hide();





    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458238%2fjquery-on-click-hide-the-next-added-element%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      Why not add a class to the element or a data attribute.



      With jQuery both are easy to achive.
      If you want to use a class just change data method to hasClass and addClass



      just do a



      $btn = $(this);
      // Check if the element has data attribute used
      if ( $btn.data('used') != 'true' ) {
      // Add data attribute used to element
      $btn.data('used', 'true')
      // Do whats needed for the first time it's clicked.
      } else {
      // The element has been used already
      }





      share|improve this answer






























        0














        Why not add a class to the element or a data attribute.



        With jQuery both are easy to achive.
        If you want to use a class just change data method to hasClass and addClass



        just do a



        $btn = $(this);
        // Check if the element has data attribute used
        if ( $btn.data('used') != 'true' ) {
        // Add data attribute used to element
        $btn.data('used', 'true')
        // Do whats needed for the first time it's clicked.
        } else {
        // The element has been used already
        }





        share|improve this answer




























          0












          0








          0







          Why not add a class to the element or a data attribute.



          With jQuery both are easy to achive.
          If you want to use a class just change data method to hasClass and addClass



          just do a



          $btn = $(this);
          // Check if the element has data attribute used
          if ( $btn.data('used') != 'true' ) {
          // Add data attribute used to element
          $btn.data('used', 'true')
          // Do whats needed for the first time it's clicked.
          } else {
          // The element has been used already
          }





          share|improve this answer















          Why not add a class to the element or a data attribute.



          With jQuery both are easy to achive.
          If you want to use a class just change data method to hasClass and addClass



          just do a



          $btn = $(this);
          // Check if the element has data attribute used
          if ( $btn.data('used') != 'true' ) {
          // Add data attribute used to element
          $btn.data('used', 'true')
          // Do whats needed for the first time it's clicked.
          } else {
          // The element has been used already
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 24 '18 at 12:55

























          answered Nov 24 '18 at 12:47









          Robin JohanssonRobin Johansson

          657




          657

























              0














              Change you id="mydd" to class="mydd", you should use id with a unique value, doing that you can hide the elements skipping 2 of them, like this.



              $('.mydd').slice(2).hide();


              If you want to hide the div wrapping your checkbox, add .parent()



              $('.mydd').parent().slice(1).hide();





              share|improve this answer




























                0














                Change you id="mydd" to class="mydd", you should use id with a unique value, doing that you can hide the elements skipping 2 of them, like this.



                $('.mydd').slice(2).hide();


                If you want to hide the div wrapping your checkbox, add .parent()



                $('.mydd').parent().slice(1).hide();





                share|improve this answer


























                  0












                  0








                  0







                  Change you id="mydd" to class="mydd", you should use id with a unique value, doing that you can hide the elements skipping 2 of them, like this.



                  $('.mydd').slice(2).hide();


                  If you want to hide the div wrapping your checkbox, add .parent()



                  $('.mydd').parent().slice(1).hide();





                  share|improve this answer













                  Change you id="mydd" to class="mydd", you should use id with a unique value, doing that you can hide the elements skipping 2 of them, like this.



                  $('.mydd').slice(2).hide();


                  If you want to hide the div wrapping your checkbox, add .parent()



                  $('.mydd').parent().slice(1).hide();






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 24 '18 at 13:44









                  Gustavo PereiraGustavo Pereira

                  12




                  12






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458238%2fjquery-on-click-hide-the-next-added-element%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                      Calculate evaluation metrics using cross_val_predict sklearn

                      Insert data from modal to MySQL (multiple modal on website)