Question

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

例如：当我创建一本书并将其命名为“Book A”时，当我删除Book A时删除了Book A，那么Book A也被删除了。

如果我创作一本书并将其命名为“Book A”，并在书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

将此remove()函数添加到您的Javascript：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

在Jquery中，您可以使用data-bookId删除所有选项，如：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何一起删除多个append（）<option>和<div>？

2 个答案: