使用切换元素（jQuery）动态添加/删除另一个表中的元素

Question

我有一个带有多个按钮的表，我想知道是否可以删除添加到单独表中的按钮，真是费劲了。我已经为此寻找了很长时间，并尝试了几种没有运气的方法。我添加了一个代码段。

到目前为止，我可以通过直接单击按钮来删除表格中的按钮（感谢您在此处找到帮助！）

我的目标很简单，就是当一个按钮处于活动状态时，将其添加到表中（数组？） 关闭按钮后，该按钮也将从阵列中删除。

任何帮助或提示都会很棒！

const buttons = document.querySelectorAll("button");
buttons.forEach(button => button.onclick = toggle);
var counter = 0;

function toggle(event) {
  const button = event.target;
  button.classList.toggle('active');
  var addtolist = $('<button class="remove" value="' + (this) + '" data-id="' + counter + '">' + (this).textContent + '</button>');
  var containerDiv = $("<div />");

  containerDiv
    .append(addtolist);
  counter++;

  if (button.classList.contains('active')) {
    $('#selectedcourses').append(containerDiv);

  } else {
    var id = $(this).data("id");
    $("*[data-id=" + id + "]").remove();         //This block doesn't do anything
    //$('#selectedcourses').find("*[data-id=" + id + "]").remove(); //neither does this
    //$('#selectedcourses').remove(); deletes everything and you cant add it back
  }
  $('.remove').click(function() {               //This block of delete code works...
    var id = $(this).data("id");                //I would like this to work when I deselect a button
    $("*[data-id=" + id + "]").remove();
  });

};

table,
tr,
td {
  border: solid 2px #41403E;
  border-collapse: collapse;
}

.btn {
  background-color: #5fc0e3;
}

.btn.active {
  background-color: #ff00f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p>2<sup>nd</sup> year autumn semester</p>
    </td>
    <td>
      <p>2<sup>nd</sup> year spring semester</p>
    </td>
    <td>
      <p>3<sup>rd</sup> year autumn semester</p>
    </td>
    <td>
      <p>3<sup>rd</sup> year spring semester</p>
    </td>
    <td>
      <p>4<sup>th</sup> year autumn semester</p>
    </td>
  </tr>
  <tr>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="5">Some class 5op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="13">Some class 13op</button>
      <br>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="6">Some class 6op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="6">Some class 6op</button>
      <br>
    </td>
  </tr>
  <tr>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="6">Some class 6op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="6">Some class 6op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
    </td>
  </tr>
  <tr>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 3op</button>
      <br>
      <button class="btn" value="6">Some class 6op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
  </tr>
</table>
<table class="selectedcourses">
  <tr>
    <td>
      <div id="selectedcourses"></div>
    </td>
  </tr>
</table>

Answer 1

看看这个简单得多的版本。我正在使用jQuery

INFORMATION_SCHEMA.COLUMNS

var counter = 0;

function toggle(event) {
  $(this).toggleClass('active');

  if ($(this).is('.active')) { // only add if "on"
    counter++;
    $('<button class="remove" value="' + this.value + '" data-id="x' + counter + '">' + (this).textContent + '</button>').appendTo("#selectedcourses")
    $(this).attr("data-id", "x" + counter); // save the counter in the button clicked
  } else {
    var id = $(this).attr("data-id"); // get the ID from the clicked button
    $(this).removeAttr("data-id");    // we do not need it anymore.
    $(".remove[data-id=" + id + "]").remove(); // remove the new button
  }
}

$(function() { // on page load
  $('#selectedcourses').on("click", ".remove", function(e) { // delegate the click in the container to all .remove buttons
    $(".btn[data-id="+$(this).attr("data-id")+"]").removeClass("active"); // deselect the main button
    $(this).remove(); // remove the clicked button
  });

  $(".btn").on("click", toggle); // clicking any button in the table
});

table,
tr,
td {
  border: solid 2px #41403E;
  border-collapse: collapse;
}

.btn {
  background-color: #5fc0e3;
}

.btn.active {
  background-color: #ff00f2;
}

Answer 2

如果您将其设置为不活动，它将删除外部的按钮，

，如果您在外部单击/删除按钮，它将设置表格内的按钮不活动

var counter = 0;
const buttons = document.querySelectorAll("button");
buttons.forEach(button => button.setAttribute('data-buttonid', counter++));
buttons.forEach(button => button.onclick = toggle);

function toggle(event) {
  const button = event.target;
  button.classList.toggle('active');
  var buttonId = $(button).attr("data-buttonid");
  var addtolist = $('<button class="remove" value="' + this.value + '" data-id="' + buttonId + '">' + (this).textContent + '</button>');
  var containerDiv = $("<div />");
  containerDiv.append(addtolist);

  if (button.classList.contains('active')) {
    $('#selectedcourses').append(containerDiv);
  }
  else {
    $("button[data-id=" + buttonId + "]").remove();
  }
};

$(document).on('click', '.remove', function() {
  var bid = $(this).data('id')
  $("button[data-buttonid=" + bid + "]").toggleClass('active');
  $(this).remove();
});

table,
tr,
td {
  border: solid 2px #41403E;
  border-collapse: collapse;
}

.btn {
  background-color: #5fc0e3;
}

.btn.active {
  background-color: #ff00f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p>2<sup>nd</sup> year autumn semester</p>
    </td>
    <td>
      <p>2<sup>nd</sup> year spring semester</p>
    </td>
    <td>
      <p>3<sup>rd</sup> year autumn semester</p>
    </td>
    <td>
      <p>3<sup>rd</sup> year spring semester</p>
    </td>
    <td>
      <p>4<sup>th</sup> year autumn semester</p>
    </td>
  </tr>
  <tr>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="5">Some class 5op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="13">Some class 13op</button>
      <br>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="6">Some class 6op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="6">Some class 6op</button>
      <br>
    </td>
  </tr>
  <tr>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="6">Some class 6op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="6">Some class 6op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
    </td>
  </tr>
  <tr>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 4op</button>
      <br>
      <button class="btn" value="5">Some class 5op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="4">Some class 3op</button>
      <br>
      <button class="btn" value="6">Some class 6op</button>
      <br>
    </td>
    <td>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="3">Some class 3op</button>
      <br>
      <button class="btn" value="4">Some class 4op</button>
      <br>
    </td>
  </tr>
</table>
<table class="selectedcourses">
  <tr>
    <td>
      <div id="selectedcourses"></div>
    </td>
  </tr>
</table>