Reputation: 407

Removing jQuery dynamically added elements with jQuery

Have looked at several other questions on this Handeling dynamically added elements with jQuery jQuery dynamically added elements cannot be removed, but none of them seem to answer the specific problem I have been encountering. I am adding an input text field and a paragraph element dynamically when a user clicks on a button already present in the DOM "#passwordEditButton". This works fine , however, I am unable to then remove the newly added element when the user clicks the same button. I can only guess that changing the img element that acts as a button dynamically removes it from the DOM and hence it does not respond to remove() - please help how do I solve this!?

<div class="main-wrapper grouping">
   <section  class="select grouping">

     <div class="button-wrapper grouping">
           <div class="button-select"><a href="uploads.php">My uploads</a></div>
            <div class="button-select"><a href="settings.php">My settings</a></div>
           <div class="button-select current"><a href="account.php">My account</a></div>
           <div class="button-select"><a href="ratings.php">My ratings</a></div>
     </div>

   </section> 


   <section class="information grouping">
    <div class="details"">

     <h2>My Account Information </h2>

     <img  id="mainEditButton" src="../images/edit2.png">         



   <div id="wrapper-account">

     <div class="tablerow">
      <p>First name:</p> 
          <p><input class="inputBox" type="text" name="firstName" value="<?php echo $firstName; ?>"></p>

     </div>

      <div class="tablerow">

        <p>Last name:</p>
        <p><input class="inputBox"  type="text" name="lastName" value="   <?php echo $lastName; ?>"></p>

    </div>

      <div class="tablerow">

       <p> School address:</p>
       <p><input class="inputBox " type="text" name="address" value="<?php echo $address; ?>"></p>

     </div>

      <div class="tablerow">

       <p>School city:</p>
       <p><input class="inputBox" type="text" name="city" value="<?php echo $city; ?>"></p>

      </div>

      <div class="tablerow">

       <p>School zip:</p>
       <p><input class="inputBox " type="text" name="zip" value="<?php echo $zip; ?>"></p>

      </div>

     <div class="tablerow">

      <p>School telephone:</p>
      <p><input class="inputBox" type="text" name="telephone" value="<?php echo $telephone; ?>"></p>

     </div>

     <div class="tablerow">

      <p>School email:</p>  
      <p> <input class="inputBox" type="text" name="email" value="<?php echo $email; ?>"></p>

     </div>


    <div class="wrapper-upload" >
      <p>Qualification: <input type="file"  name="qualification" class="files"></p>
     </div>

    </div>  

   </div> 



   <div class="details password">


   <img id="passwordEditButton" src="../images/edit2.png">

   <div class="tablerow username-div">

        <p>Username:</p>
        <p><input id="username" class="password-box" type="text" name="username" value="<?php echo $username; ?>" ></p>

    </div>
     <div class="tablerow password-div">

        <p>Password:</p>
        <p><input  id="passwordOrignal" class="password-box" type="password" name="password" value="<?php echo $password; ?>" ></p>

    </div>

    <div id="placeholderUsername"></div>
     <div id="placeholderNewPassword"></div>
      <div id="placeholderConfirmPassword"></div>

  </div>

  <div class="membership-details">
 <p>Joined on: </p>
 <p>Membership Status: </p>
 <p>Current rating:<?php echo $points; ?> </p>
 </div>

 </div>     

    <script>




   $(document).ready(function() {





     $("#passwordEditButton").click(function () {

     $(this).toggleClass("selected");

     if($( "#passwordEditButton" ).hasClass( "selected" )) {

      $("#passwordEditButton").attr('src', '../images/editing.png');






        $('#placeholderUsername').append('<div>    </div>').addClass("tablerow username-div");
         $('.username-div').attr("id","usernameDiv");
          $('#usernameDiv').append('<p>New Username</p>');
           $('#usernameDiv').append('<p></p>').attr("id","newUser");
            $('#newUser').append('<input>').addClass("password-Box").attr( { id:"newUsername", type:"text", name:"newUsername", value:" " } );


          $('.details.password').append('<div></div>').attr("id","newPasswordDiv");
            $('#newPasswordDiv').append('<p>New Password</p>');
             $('#newPasswordDiv').append('<p></p>').attr("id","newPassword");
              $('#newPassword').append('<input>').addClass("password-Box").attr( { id:"enterNewPassword", type:"password", name:"enterNewPassword", value:" " } );


            $('.details.password').append('<div> </div>').attr("id","confirmPasswordDiv");
              $('#confirmPasswordDiv').append('<p>Confirm Password</p>');
               $('#confirmPasswordDiv').append('<p> </p>').attr("id","confirmPassword");
                $('#confirmPassword').append('<input>').addClass("password-Box").attr( { id:"confirmNewPassword", type:"password", name:"confirmNewPassword", value:" " } );




      $("input.password-Box").toggleClass('errorBoxPassword');


        $(".details.password").css({"height":"280px"});
         $(".details.password").css({"bottom":"0px"});
          $("#username").css({"position":"absolute"});
           $("#username").css({"top":"10px"});
            $("#username").css({"left":"98px"}); 


      } 
      else 
      { 
        $("#passwordEditButton").attr('src', '../images/edit2.png');

        $("#username").css({"position":"static"}); 


      $('#placeholderUsername').empty();

     //none of these work
      $('#usernameDiv').closest.remove();
       $('#newPasswordDiv').remove();
        $('#confirmPasswordDiv').parent().remove();
         $('input.password-Box').toggleClass('errorBoxPassword');
          $('.details.password').css({"height":"auto"});
           $('.details.password').css({"bottom":"30px"});


      }
       });

      $("#mainEditButton").click(function () {

      if(mainEditing == false) {

      $("#mainEditButton").attr('src', '../images/editing.png');
      mainEditing=true;
        $("input.inputBox").toggleClass('errorBox');



      }else 
      {

       $("#mainEditButton").attr('src', '../images/edit2.png');
       mainEditing=false;
       $("input.inputBox").toggleClass('errorBox');
      }

      });

     });



   </script>






  </div>

  </div>
     <footer>
         <p>Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning</p> 
         <img  src="../images/company.png" height="12"  width="12"> 
     </footer>

<?php
}
 ?>

Upvotes: 0