javascript - 使用切换元素（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>

标签： javascriptjqueryhtml

Answer 1

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

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

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>