如何使用 remove() 删除不同 <select> 中的特定 <options>？

Question

我想在 Jquery 上使用我的脚本，但我完全不知道该怎么做。 =/ 所以，我的问题实际上是我根本不知道，例如，当我删除一本包含章节块的书时。好吧，select 标签#whichBook 中的书的选项也被删除了，但不是所有在select 标签#whichChapter.

中与之关联的章节的选项

所以，我想知道的是：例如，当我按下按钮 .removeBook 时，如何获得 select #whichChapter 中与我刚刚删除的 .BookName 相关的所有选项，然后也被删除了（就像删除了 .ChapterName）。

我正在想一些事情并在这里尝试一些事情，但那是行不通的：=/

$(document).on('click', '.removeBook', function(){
var BOOK = $(this).closest('.BookName' ).attr('data-book-name');
$('#whichBook option:contains("'+ BOOK +'")').remove();
var CHAPTER = $(document).closest('.ChapterName' ).attr('data-chapter-name');
$('#whichChapter option:contains("'+ CHAPTER +'")').remove();

});

所以这是我在 Fiddle 上的代码，如果您能解决我的问题，在此先感谢您。当我开始 JQuery 时，我还不是很了解它。

Post 脚本：当两本书或两章或两行的名称相同时，我还有一个冲突问题，但这实际上不是主要问题 =)

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

$("#list").on('click', "button.removeChapter", function() {
  $(this).parent().remove();
});

$("#list").on('click', "button.removeLine", function() {
  $(this).parent().remove();
});

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

$(document).on('click', '.removeChapter', function() {
  var CHAPTER = $(this).closest('.ChapterName').attr('data-chapter-name');
  $('#whichChapter option:contains("' + CHAPTER + '")').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="v" class="removeChapter">Remove</button>' + '</div>');
    //$( ".ChapterName").data("bookName") === $('#chapterName').val();
  }
});

//FOR LINE
$('#createLine').click(function() {
  //Create a select option in <select id="#whichLine"> (which don't really exist) if at least one <div class="ChapterName"> exist.
  if ($('.ChapterName').length > 0) {
    $("#whichLine").append('<option>' + $('#lineName').val() + '</option>');
    var listItem = $('#lineName').val();
    var chapterName = $('#whichChapter 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.

    $('.ChapterName[data-chapter-name=' + chapterName + ']', '#list').append('<div class= "LineName" data-list-name="' + $('#lineName').val().replace(/ /g, "-") + '">' + '>' + '>' + listItem + '<button type="button" name="removeLine" class="removeLine">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>
  <option value="line">a Line</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">Create</button>
  </div>

  <div class="line">
    <select id="whichChapter">
      <option value="none">From which chapter?</option>
    </select>
    <input type="text" id="lineName" name="name" placeholder="Line Name">
    <button type="button" name="createLine" id="createLine">Create</button>
  </div>

</div>
<hr>
<div class="optionBox">
  <div id="list"></div>
</div>

Answer 1

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

$("#list").on('click', "button.removeChapter", function() {
  $(this).parent().remove();
});

$("#list").on('click', "button.removeLine", function() {
  $(this).parent().remove();
});

$(document).on('click', '.removeBook', function() {
  var BOOK = $(this).closest('.BookName').attr('data-book-name');
  $('#whichBook option:contains("' + BOOK + '")').remove();
  var CHAPTER = $(document).closest('.ChapterName').attr('data-chapter-name');
  $('#whichChapter option[data-book-name="' + BOOK + '"]').remove();
});

$(document).on('click', '.removeChapter', function() {
  var CHAPTER = $(this).closest('.ChapterName').attr('data-chapter-name');
  $('#whichChapter option:contains("' + CHAPTER + '")').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 data-book-name="' + listItem + '">' + $('#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) {
    
    var listItem = $('#chapterName').val();
    var bookName = $('#whichBook option:selected').val().replace(/ /g, "-");
$("#whichChapter").append('<option data-book-name="' + bookName + '">' + $('#chapterName').val() + '</option>');
    //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="v" class="removeChapter">Remove</button>' + '</div>');
    //$( ".ChapterName").data("bookName") === $('#chapterName').val();
  }
});

//FOR LINE
$('#createLine').click(function() {
  //Create a select option in <select id="#whichLine"> (which don't really exist) if at least one <div class="ChapterName"> exist.
  if ($('.ChapterName').length > 0) {
    $("#whichLine").append('<option>' + $('#lineName').val() + '</option>');
    var listItem = $('#lineName').val();
    var chapterName = $('#whichChapter 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.

    $('.ChapterName[data-chapter-name=' + chapterName + ']', '#list').append('<div class= "LineName" data-list-name="' + $('#lineName').val().replace(/ /g, "-") + '">' + '>' + '>' + listItem + '<button type="button" name="removeLine" class="removeLine">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/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>
  <option value="line">a Line</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">Create</button>
  </div>

  <div class="line">
    <select id="whichChapter">
      <option value="none">From which chapter?</option>
    </select>
    <input type="text" id="lineName" name="name" placeholder="Line Name">
    <button type="button" name="createLine" id="createLine">Create</button>
  </div>

</div>
<hr>
<div class="optionBox">
  <div id="list"></div>
</div>

将与 div 中相同的数据属性添加到 select 的选项中。

$("#whichChapter").append('<option data-book-name="' + bookName + '" >' + $('#chapterName').val() + '</option>');

当你需要删除章节时，使用数据属性select或：

$(document).on('click', '.removeBook', function() {
  var BOOK = $(this).closest('.BookName').attr('data-book-name');

  $('#whichChapter option[data-book-name="' + BOOK + ']")').remove();
});

片段应该有一个有效的解决方案。

如何使用 remove() 删除不同 <select> 中的特定 <options>？

How to remove specific <options> in different <select> with remove()?

jquery

select

option