jquery - 如何同时删除多个append()<option>和<div>？

Question

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

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

如果我创建一本书并将其命名为“Book A”，并且将 Book A 中的一章命名为 Chap，情况也是如此。在同一个示例中，如果我删除书 A，则书 A 及其中的所有章节标签都会被删除。

这是我的代码:

//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

添加此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>