Question

我正在尝试使用jquery来创建一些div，通过单击它们可以将其文本添加到列表中，然后再次单击该div可以仅从列表中删除该div的文本，而不是全部删除其中。但是当我要通过再次单击该div进行删除时，将所有文本从列表中删除

$(".first-div").on('click', function() {
  $(this).toggleClass("div2 active");

  let matn = $("<h3>" + $(this).html() + "</h3>");

  if ($(this).hasClass("active")) {
    $(".textbox").append(matn);
  } else {
    $(".textbox").children("h5").html($(this).html()).remove();
  }

})

body {
  padding: 3em;
}

.first-div {
  padding: 0.5em 1.5em;
  background-color: silver;
  margin: 2em 0;
  border: 2px solid silver;
}

.div2 {
  border-color: red;
}

.text {
  margin-top: 3em;
  padding: 1em;
}

.textbox {
  padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <section>
    <div class="first-div">
      <h5>text1</h5>
    </div>
    <div class="first-div">
      <h5>text2</h5>
    </div>
    <div class="first-div">
      <h5>text3</h5>
    </div>
  </section>
  <section class="text">
    <div class="textbox"></div>
  </section>
</body>

Answer 1

一个更简单的模式是每次进行更改时都构建整个列表，而不是在选择/取消选择项时必须维护数组。

还要注意，您当前的示例是在<h5>内嵌套<h3>元素，这是无效的。

$(".first-div").on('click', function() {
  $(this).toggleClass("div2 active");
  let matn = $('.first-div.active').map(function() {
    return $(this).html();
  }).get();
  $(".textbox").html(matn);
})

body {
  padding: 3em;
}

.first-div {
  padding: 0.5em 1.5em;
  background-color: silver;
  margin: 2em 0;
  border: 2px solid silver;
}

.div2 {
  border-color: red;
}

.text {
  margin-top: 3em;
  padding: 1em;
}

.textbox {
  padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="first-div">
    <h5>text1</h5>
  </div>
  <div class="first-div">
    <h5>text2</h5>
  </div>
  <div class="first-div">
    <h5>text3</h5>
  </div>
</section>

<section class="text">
  <div class="textbox"></div>
</section>

Answer 2

您可以找到包含文本的元素，然后将其从列表中删除，如下所示：

$(".first-div").on('click', function() {
   $(this).toggleClass("div2 active");

   let matn = $("<h3>" + $(this).html() + "</h3>");

   if ($(this).hasClass("active")) {
     $(".textbox").append(matn);
   } else {
     $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();
   }

 })

在您的代码中只需更改以下内容即可：

$(".textbox").children("h5").html($(this).html()).remove();

对此：

$(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();

Here is the JSFiddle demo

通过单击将div的文本添加到列表中，然后单击同一div将其删除

2 个答案: