javascript - 删除第二次点击添加的id名称

Question

我制作了一个在 HTML 和 JS 中选择座位的应用程序，但我希望当我选择座位时，Id 会显示在 h3 标记中，当您再次单击它时，该 id 的文本会被删除

这是我的 html 的缩短版本，原始版本有更多行和列:

$(document).ready(function() {
  var seatsUnclicked = document.getElementsByClassName("seat-unique");
  var seatsClicked = document.getElementsByClassName("seatClicked");
  var images = document.getElementsByTagName("IMG");
  var seatsOutput = document.getElementById("seatsOutput");


  for (let i = 0; i < seatsUnclicked.length; i++) {

    seatsUnclicked[i].onclick = function() {

      this.classList.add("new")

      if ($(this).hasClass('seatClicked')) {

        //Code to remove the ID added goes here

        this.classList.remove("seatClicked")
        this.classList.remove("new")
        this.src = "chair.svg";

      }

      if ($(this).hasClass('new')) {
        seatsOutput.innerHTML += ' ' + this.id
        this.src = "chairclicked.svg";
        this.classList.add("seatClicked")
        this.classList.remove("new")

      }

    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seats-row-A">
  <img id="A1" class="seat-unique" src="chair.svg">
  <img id="A2" class="seat-unique " src="chair.svg">
  <img id="A3" class="seat-unique " src="chair.svg">
  <img id="A4" class="seat-unique " src="chair.svg">
  <img id="A5" class="seat-unique" src="chair.svg">
  <img id="A6" class="seat-unique " src="chair.svg">
  <img id="A7" class="seat-unique " src="chair.svg">
</div>
<h2>Seats chosen:<span id="seatsOutput"></span></h2>

Answer 1

您需要获取span标签的文本并更新它

类似的东西

var seats = seatsOutput.textContent.split(" ");

seats.splice(seats.indexOf(this.id),1);

seatsOutput.textContent = seats.join(" ")

var divs = document.getElementsByClassName("test");
var seat = document.getElementById("seats");
for(var i=0; i< divs.length; i++){
  divs[i].addEventListener("click",function(e){
    e.target.classList.toggle("red");
    
    if(!e.target.classList.contains('red')){
    var seats = seat.textContent.split(" ");

    seats.splice(seats.indexOf(this.id),1);

    seat.textContent = seats.join(" ")
    
    }else{
    
    seat.textContent+=' '+e.target.id;
    
    }
    

  })
}

.red{
  color: red;
}

#seats{

height: 30px;
border : solid 1px;

}

<div class="test" id="1">1</div>
<div class="test" id="2">2</div>
<div class="test" id="3">3</div>

<br/><br/>
<span id="seats"></span>