Jquery clone / remove - добавление элементов в вывод

У меня есть функция клонирования / удаления в div и его элементах. Эта часть работает нормально, но у меня есть кнопка сгенерировать код, и мне нужно вывести содержимое вновь клонированных элементов, когда они будут сгенерированы.

На данный момент у меня есть текущий javascript для вывода исходных элементов div на страницу, но мне интересно, есть ли способ добавления вывода на лету в зависимости от того, был ли div клонирован или удален.

var cloneIndex = $(".clonedInput").length;

function clone() {
  $(this).parents(".clonedInput").clone()
    .appendTo("body")
    .attr("id", "clonedInput" + cloneIndex)
    .on('click', 'button.clone', clone)
    .on('click', 'button.remove', remove);
  cloneIndex++;
}

function remove() {
  $(this).parents(".clonedInput").remove();
}

$("button.clone").on("click", clone);
$("button.remove").on("click", remove);

/*generate the code*/
function myFunction() {

  var quote = '"';

  var mobile_start = "<pre>&lt;div class = " + quote + "show-for-small-only" + quote + "&gt;</pre>";
  var inner_style = "<pre>&lt;hr style = " + quote + "color:#EEECE8; margin-left: 5px; margin-right: 5px;" + quote + "/&gt;</pre>";
  var mobile_title = document.getElementById("title_text").value;
  var headline = "<pre>&lt;p class = " + quote + "text-center" + quote + " style = " + quote + "background-color:" + document.getElementById("name_text").value + "; color: white; font-size:45px; font-family:din-bold; padding-top:15px; padding-bottom: 10px;" + quote + "&gt;</pre>" + mobile_title + "<pre>&lt;/p&gt;</pre>";
  var mobile_end = "<pre>&lt;/div&gt;</pre>";

  document.getElementById("top").innerHTML = mobile_start + inner_style + mobile_title + headline + mobile_end + "<br /><br />";

}

body {
  padding: 10px;
}

.clonedInput {
  width: 50%;
  padding: 10px;
  border-radius: 5px;
  background-color: #def;
  margin-bottom: 10px;
}

.clonedInput div {
  margin: 5px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "clonedInput" class = "clonedInput">
  <div>
    <fieldset>
      <legend>Product </legend>
      <label for = "name">Title:</label>
      <input type = "text" id = "title_text" />
      <label for = "mail">Product Name:</label>
      <input type = "text" id = "name_text" />
    </fieldset>
  </div>
  <div class = "actions">
    <button class = "clone">Clone</button>
    <button class = "remove">Remove</button>
  </div>
</div>
<button onClick = "myFunction()">Generate Code</button>
<p id = "top" style = "font-family:Arial; font-size: 18px;"></p>

трудно понять вопрос. Также не рекомендуется смешивать ненавязчивые прослушиватели событий (например, ваши jQuery) и встроенные. Выберите один подход и будьте последовательны

— 06.07.2018 23:23

javascript jquery

06.07.2018 23:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Используйте имена классов вместо идентификаторов для полей. Когда вы генерируете вывод, пропустите каждый clonedInput и выберите поля в их дочерних элементах, например:

function myFunction() {
    var code = "";
    $(".clonedInput").each(function() {
        var title=$(this).find(".title_text").val(),
            productName=$(this).find(".name_text").val();
        code += ....... //append the code for each element
    });
    $("#top").html(code);
}

Совет: используйте правильные описательные имена для ваших функций, переменных и имен элементов.

Большое спасибо, Габриэль.

— 07.07.2018 12:16

Пожалуйста, пометьте его как решение, если оно было полезным. Спасибо.

— 08.07.2018 18:36

06.07.2018 23:39