How can I "clear" the first active class appended and re-append the current active class?-CodePudding

I don't know the correct terminology to us to describe this issue. I'm trying to append the name of the state (Alaska, Alabama, etc) from the <span > when it has the active class to <button >, and it somewhat works. But, right now, the each state name is added and doesn't replace the first state. How can I "clear" the appended text and re-append the current button.active class?

$('.state-button').on('click', function() {
  let _this = $(this);

  if (!_this.hasClass('active')) {
    $('.state-button.active, .record.active').removeClass('active');
    $('[data-state='   _this.data('state')   ']').addClass('active');
    var statename = $('button.active span.state-name').text();
    $(".close-state").append(statename);
    $(".close-state").show();
  }
});

.record {
  display: none;
}

.state-button {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
}

.state-button.active {
  border-color: red;
}

.record.active {
  display: block;
}

.close-state {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  data-state="AK"><span >Alaska</span></button>
<button  data-state="AR"><span >Arkansas</span></button>
<button  data-state="CA"><span >California</span></button>
<div  data-state="AK">
  <h1 >Customer 1</h1>
  <ul>
    <li >Location: 345 Cow Town, Anchorage, <span >AK</span></li>
  </ul>
</div>
<div  data-state="AR">
  <h1 >Customer 2</h1>
  <ul>
    <li >Location: Mobile, <span >AR</span></li>
  </ul>
</div>
<div  data-state="CA">
  <h1 >Customer 3</h1>
  <ul>
    <li >Location: Los Angeles <span >CA</span></li>
  </ul>
</div>
<div>
  <button >Close </button>
</div>

CodePudding user response：

The quick way to do this would be to put a new element in the button, eg. a span, and simply overwrite the text() of that each time a button is clicked.

Also note the example has a couple of tweaks to the jQuery to make it a little more succinct:

$('.state-button:not(.active)').on('click', function() {
  let $this = $(this);
  $('.state-button.active, .record.active').removeClass('active');
  $(`[data-state="${$this.data('state')}"]`).addClass('active');
  $('.close-state').show().find('span').text($this.text());
});

.record {
  display: none;
}

.state-button {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
}

.state-button.active {
  border-color: red;
}

.record.active {
  display: block;
}

.close-state {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  data-state="AK"><span >Alaska</span></button>
<button  data-state="AR"><span >Arkansas</span></button>
<button  data-state="CA"><span >California</span></button>

<div  data-state="AK">
  <h1 >Customer 1</h1>
  <ul>
    <li >Location: 345 Cow Town, Anchorage, <span >AK</span></li>
  </ul>
</div>

<div  data-state="AR">
  <h1 >Customer 2</h1>
  <ul>
    <li >Location: Mobile, <span >AR</span></li>
  </ul>
</div>

<div  data-state="CA">
  <h1 >Customer 3</h1>
  <ul>
    <li >Location: Los Angeles <span >CA</span></li>
  </ul>
</div>

<div>
  <button >Close <span></span></button>
</div>