如何一起删除多个 append() <option> 和 <div>？

Question

我的 JQuery 有问题，实际上我正在使用我想添加的功能。我不知道如何从带有特定 div 的标签中删除特定选项。

例如：当我创建一本书并将其命名为 "Book A" 当我使用删除按钮删除书 A 时，书 A 也被删除。

如果我创建一本书并将其命名为 "Book A" 并且 Book A 中的一章名为 Chap。在同一个例子中，如果我删除了书 A，那么书 A 和其中的所有章节标签都被删除了。

你能帮我解决我的问题吗？我尝试将数据属性放在它们上面，但由于我是 Jquery 或 JS 的新手，我从 3 天起就坚持使用它 =/ 提前致谢！ =)

这是我的代码：

//Remove Buttons - Function ////START////
$("#list").on('click', "button.removeBook", function() {
  $(this).parent().remove();
});

$("#list").on('click', "button.removeChapter", function() {
  $(this).parent().remove();
});
//Remove Buttons - Function ////END////

//SlideToggle Forms - Function ////START////
$("#select").change(function() {
  var val = $(this).val();
  $("#select-choice > div").hide();
  $("." + val).slideToggle();
});
//SlideToggle Forms - Function ////END////

//Append generated elements- Function ////START////
//FOR BOOK
$('#createBook').click(function() {
  var listItem = $('#bookName').val();
  //Create a select option in <select id="#whichBook">
  $("#whichBook").append('<option>' + $('#bookName').val() + '</option>');

  //Create a <div class="BookName"> in <div id="list">
  $('#list').append('<div class="BookName" data-book-name="' + $('#bookName').val().replace(/ /g, "-") + '">' + listItem + '<button type="button" name="removeBook" class="removeBook">Remove</button>' + '</div>');
  $('#bookName').val('');
});

//FOR CHAPTER
$('#createChapter').click(function() {
  //Create a select option in <select id="#whichChapter"> if at least one <div class="BookName"> exist
  if ($('.BookName').length > 0) {
    $("#whichChapter").append('<option>' + $('#chapterName').val() + '</option>');
    var listItem = $('#chapterName').val();
    var bookName = $('#whichBook option:selected').val().replace(/ /g, "-");

    //Create a <div class="ChapterName"> inside the <div class="BookName"> associated with the <select id="#whichBook"> if at least one <div class="BookName"> exist.
    $('.BookName[data-book-name=' + bookName + ']', '#list').append('<div class= "ChapterName" data-chapter-name="' + $('#chapterName').val().replace(/ /g, "-") + '">' + '>' + listItem + '<button type="button" name="removeBook" class="removeBook">Remove</button>' + '</div>');
    //$( ".ChapterName").data("bookName") === $('#chapterName').val();
  }
});
//Append generated elements- Function ////END////

#select-choice>div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="select">
  <option value="none">Select something</option>
  <option value="book">a Book</option>
  <option value="chapter">a Chapter</option>
</select>

<div id="select-choice">
  <div class="book">
    <input type="text" id="bookName" name="name" placeholder="Book Name">
    <button type="button" name="createBook" id="createBook">Create</button>
  </div>
  <div class="chapter">
    <select id="whichBook">
      <option value="none">From which book?</option>
    </select>
    <input type="text" id="chapterName" name="name" placeholder="Chapter Name">
    <button type="button" name="createChapter" id="createChapter">Créer le site</button>
  </div>
</div>
<hr>
<div class="optionBox">
  <div id="list"></div>
</div>

Answer 1

您可以在向图书下拉列表和章节下拉列表添加选项时添加 data-bookId 属性。

在 Jquery 中，您可以简单地删除所有带有 data-bookId 的选项，例如：

 $('option[data-bookId="SomeId"]').remove();

这将从两个下拉列表中删除具有此属性的所有选项。确保每本书的 Book Id 都应该是唯一的。希望对您有所帮助:)

function removeBook()
{
    $('option[data-bookId="' + $('#bookDropdown option:selected').attr("data-bookId")  + '"]').remove();
}

<script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>

<select id="bookDropdown">
    <option>Select Book</option>
    <option data-bookId="English">English</option>
    <option data-bookId="Mathematics">Mathematics</option>
    <option data-bookId="Physics">Physics</option>
    <option data-bookId="Biology">Biology</option>
    <option data-bookId="French Language">French Language</option>
</select>

<br>
<br>

<select id="chapsDropdown">
    <option>Select Chapter</option>
    <option data-bookId="English">Grammer</option>
    <option data-bookId="English">Stories</option>
    <option data-bookId="English">Letters</option>
    <option data-bookId="Mathematics">Algebra</option>
    <option data-bookId="Mathematics">Limits</option>
</select>

<br>
<br>

<button onclick="removeBook()">Remove Book</button>

Answer 2

将此 remove() 功能添加到您的 Javascript:

$(document).on('click', '.removeBook', function(){
    var bookName = $(this).closest('.BookName' ).attr('data-book-name');
    $('#whichBook option:contains('+ bookName +')').remove();
});

//Remove Buttons - Function ////START////
$("#list").on('click', "button.removeBook", function() {
  $(this).parent().remove();
});

$("#list").on('click', "button.removeChapter", function() {
  $(this).parent().remove();
});
//Remove Buttons - Function ////END////

//SlideToggle Forms - Function ////START////
$("#select").change(function() {
  var val = $(this).val();
  $("#select-choice > div").hide();
  $("." + val).slideToggle();
});
//SlideToggle Forms - Function ////END////

//Append generated elements- Function ////START////
//FOR BOOK
$('#createBook').click(function() {
  var listItem = $('#bookName').val();
  //Create a select option in <select id="#whichBook">
  $("#whichBook").append('<option>' + $('#bookName').val() + '</option>');

  //Create a <div class="BookName"> in <div id="list">
  $('#list').append('<div class="BookName" data-book-name="' + $('#bookName').val().replace(/ /g, "-") + '">' + listItem + '<button type="button" name="removeBook" class="removeBook">Remove</button>' + '</div>');
  $('#bookName').val('');
});

//FOR CHAPTER
$('#createChapter').click(function() {
  //Create a select option in <select id="#whichChapter"> if at least one <div class="BookName"> exist
  if ($('.BookName').length > 0) {
    $("#whichChapter").append('<option>' + $('#chapterName').val() + '</option>');
    var listItem = $('#chapterName').val();
    var bookName = $('#whichBook option:selected').val().replace(/ /g, "-");

    //Create a <div class="ChapterName"> inside the <div class="BookName"> associated with the <select id="#whichBook"> if at least one <div class="BookName"> exist.
    $('.BookName[data-book-name=' + bookName + ']', '#list').append('<div class= "ChapterName" data-chapter-name="' + $('#chapterName').val().replace(/ /g, "-") + '">' + '>' + listItem + '<button type="button" name="removeBook" class="removeBook">Remove</button>' + '</div>');
    //$( ".ChapterName").data("bookName") === $('#chapterName').val();
  }
});
$(document).on('click', '.removeBook', function(){
  var bookName = $(this).closest('.BookName' ).attr('data-book-name');
  $('#whichBook option:contains('+ bookName +')').remove();
});
//Append generated elements- Function ////END////

#select-choice>div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="none">Select something</option>
  <option value="book">a Book</option>
  <option value="chapter">a Chapter</option>
</select>

<div id="select-choice">
  <div class="book">
    <input type="text" id="bookName" name="name" placeholder="Book Name">
    <button type="button" name="createBook" id="createBook">Create</button>
  </div>
  <div class="chapter">
    <select id="whichBook">
      <option value="none">From which book?</option>
    </select>
    <input type="text" id="chapterName" name="name" placeholder="Chapter Name">
    <button type="button" name="createChapter" id="createChapter">Créer le site</button>
  </div>
</div>
<hr>
<div class="optionBox">
  <div id="list"></div>
</div>

如何一起删除多个 append() <option> 和 <div>？

How to remove many append() <option> and <div> together?

jquery

select

option