Question

单击按钮时删除类时遇到问题。我使用jQuery并希望使用removeClass('details')删除它，但它仍然无法正常工作。你有什么想法吗？解决方案已提供，我更新了代码。请参阅以下答案。只需将$(this).prev().closest('.details').remove();放在$(this).remove();之前。

＆＃13;

$(document).ready(function() {
   $('ul').on('click', 'button', function(){
      var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked the offer travel!</li></ol>');
       $(this).closest('.tour').append(message);
       $(this).remove();
       
       // this doesn't remove a class details
       //$(this).removeClass('details');
   });
});

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <title>GuidedTours</title>
        <link rel="stylesheet" type="text/css" href="wageup.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
    </head>
    <body>
    <div class="container">
       <h2>Guided Tours</h2>
            <hr>
            <div id="tours" class="card">
              <ul class="list-group list-group-flush">
                  
                <li class="usa tour list-group-item"; data-discount="299">
                  <h3>New York, New York</h3>
                  <span class="details badge badge-success">$1,899 for 7 nights</span>
                  <button class="book btn btn-primary">Book Now</button>
                </li>
                  
                <li class="europe tour list-group-item" data-discount="176">
                  <h3>Paris, France</h3>
                  <span class="details badge badge-success">$2,299 for 7 nights</span>
                  <button class="book btn btn-primary">Book Now</button>
                </li>
                  
                <li class="asia tour list-group-item" data-discount="349">
                  <h3>Tokyo, Japan</h3>
                  <span class="details badge badge-success">$3,799 for 7 nights</span>
                  <button class="book btn btn-primary">Book Now</button>
                </li>
                  
              </ul>
            </div>
        </div>


        
        
                
        <!-- Scripts -->
                
        <!-- Jquery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <!-- Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- JS -->
        <script type="text/javascript" src="guidedtours.js"></script>
        
    </body>
</html>

＆＃13;

Answer 1

this是指button而不是span。您必须使用.prev()：

$(this) // is button
 .prev() // this is span
 .removeClass('details');

＆＃13;

$(document).ready(function() {
   $('ul').on('click', 'button', function(){
      var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked the offer travel!</li></ol>');
       $(this).closest('.tour').append(message);
       $(this).remove();
       
       // this doesn't remove a class details
       $(this) // is button
        .prev() // this is span
        .removeClass('details');
   });
});

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <title>GuidedTours</title>
        <link rel="stylesheet" type="text/css" href="wageup.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
    </head>
    <body>
    <div class="container">
       <h2>Guided Tours</h2>
            <hr>
            <div id="tours" class="card">
              <ul class="list-group list-group-flush">
                  
                <li class="usa tour list-group-item"; data-discount="299">
                  <h3>New York, New York</h3>
                  <span class="details badge badge-success">$1,899 for 7 nights</span>
                  <button class="book btn btn-primary">Book Now</button>
                </li>
                  
                <li class="europe tour list-group-item" data-discount="176">
                  <h3>Paris, France</h3>
                  <span class="details badge badge-success">$2,299 for 7 nights</span>
                  <button class="book btn btn-primary">Book Now</button>
                </li>
                  
                <li class="asia tour list-group-item" data-discount="349">
                  <h3>Tokyo, Japan</h3>
                  <span class="details badge badge-success">$3,799 for 7 nights</span>
                  <button class="book btn btn-primary">Book Now</button>
                </li>
                  
              </ul>
            </div>
        </div>


        
        
                
        <!-- Scripts -->
                
        <!-- Jquery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <!-- Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- JS -->
        <script type="text/javascript" src="guidedtours.js"></script>
        
    </body>
</html>

＆＃13;

单击按钮时，removeClass不起作用

1 个答案: