已经查看了有关此Handeling dynamically added elements with jQuery jQuery dynamically added elements cannot be removed的其他几个问题，但它们似乎都没有回答我遇到过的具体问题。当用户单击DOM“#passwordEditButton”中已存在的按钮时，我会动态添加输入文本字段和段落元素。这工作正常，但是，当用户单击相同的按钮时，我无法删除新添加的元素。我只能猜测，改变充当按钮的img元素会动态地将它从DOM中删除，因此它不响应remove（） - 请帮助我如何解决这个问题？
<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
}
?>
答案 0 :(得分：1)
清空div容器内容使用
$('.details.password').html("")
答案 1 :(得分：0)
使用，
$('.username-div').remove();
如果username-div是多个并且您要删除最后一个，那么请使用:last-selector之类的，
$('.username-div:last').remove();