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

Question

我想在jQuery上使用我的脚本，但我完全不知道该怎么做。=/因此，我的问题实际上是我根本不知道，例如，当我删除一本书时，其中包含章节块。好吧，本书在"选择标签"中的选项也被删除了，但并不是在选择标签＃Whath Chapter中与之关联的章节的所有选项。

所以，我想知道的是：例如，当我按下按钮.removebook时，然后将所有选项从SELECT＃WHOWHCHAPTER中获得的所有选项与我刚刚删除的.bookName相关的所有选项，然后也将其删除（例如。删除了captername）。

我在想某件事，在这里尝试一些东西，但这是不起作用的：=/

$(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();

}）;

所以这是我在小提琴上的代码，如果您能解决我的问题，请提前非常感谢。当我开始jQuery时，我还没有对此有很好的了解。

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

//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中的divs中的选项。

的选项。

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

并且当您需要删除章节时，请使用Data-Atribute选择器：

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

摘要应该具有工作解决方案。