добавление текста div в список, нажав и удалив его, нажав на тот же div - PullRequest
Новая
       1

добавление текста div в список, нажав и удалив его, нажав на тот же div

0 голосов
/ 14 ноября 2018

Я пытаюсь создать несколько div'ов с jquery, чтобы щелкнув по ним, я мог добавить их текст в список и, щелкнув снова по этому 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>

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Вы можете просто найти элемент, содержащий текст, и удалить его из списка следующим образом: 

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

Вот демоверсия JSFiddle

0 голосов
/ 14 ноября 2018

Более простой шаблон для подражания состоит в том, чтобы формировать весь список каждый раз, когда вносятся изменения, вместо того, чтобы поддерживать массив при выборе / отмене выбора элемента.

Также обратите внимание, что в текущем примере вложены <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...