@kidwen

Добавление новых html элементов к уже добавленному элементу html через JS?

Есть код, который динамический добавляет до 10 html блоков и естественно по необходимости удаляет их.
Каким методом в моем коде можно реализовать добавления в каждый из этих 10 блоков ещё html блоки от 1 до 10 с возможностью удаления по необходимости в определенном блоке

Html код который необходимо добавить
<span class="text-console">Текст </span>
    <input type="text" class="input-type name" name="name[]">
    <span class="text-console">Текст</span>
    <input type="number" class="input-type number" min="1" max="4" name="value[]">


let numb = 0;

$(document).on("click", "[class='addTest']", addTest);

function addTest() {

  let btn = document.createElement("input");
  let div = document.createElement("div");

  if (numb < 10) {
    numb++;

    let html_test = (`
          <div class="text-console title-test">Заголовок № ${numb}</div>
          <input type="text" name="title-H2-${numb}" class="title-H2">
          <div class="text-console quest-test">Текст № ${numb}</div>
          <textarea rows="3" cols="70" name="text-${numb}"></textarea>
          <div id="block${numb}">

          </div>
          <input type="button" class="add-test-answers${numb}" value="Добавить новый блок">
      `);
    btn.setAttribute("type", "button");
    btn.setAttribute("class", "button-del");
    btn.setAttribute("value", "удалить");
    div.setAttribute("id", "pick" + numb);
    div.setAttribute("class", "block-forms block-test");
    div.innerHTML = html_test;
    div.append(btn);
    $('.new-block-test').append(div);

    $(btn).click(function () {
      $(this).parent().remove();
      removeTest()
      numb--;
    })

  } else {
    alert("Можно добавить не более 10-ти блоков");
  }
}
function removeTest() {
  let del_element_id = document.querySelectorAll('.new-block-test .block-test');
  del_element_id.forEach((id, index) => {
    id.setAttribute('id', 'pick' + (index + 1));
  });
  let del_element_title_test = document.querySelectorAll('.block-test > .title-test');
  del_element_title_test.forEach((title, index) => {
    title.innerHTML = 'Заголовок № ' + (index + 1);
  });
  let del_element_title_H2 = document.querySelectorAll('.blocks .title-H2');
  del_element_title_H2.forEach((title_H2, index) => {
    title_H2.setAttribute('name', 'title-H2-' + (index + 1));
  });
  let del_element_quest_test = document.querySelectorAll('.block-test > .quest-test');
  del_element_quest_test.forEach((quest, index) => {
    quest.innerHTML = 'Вопрос № ' + (index + 1);
  });
  let del_element_textarea = document.querySelectorAll('.block-test > textarea');
  del_element_textarea.forEach((textarea, index) => {
    textarea.setAttribute('name', 'text-' + (index + 1));
  });
}
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
27 янв. 2021, в 00:37
11111 руб./за проект
26 янв. 2021, в 23:30
3000 руб./за проект
26 янв. 2021, в 23:07
1000 руб./за проект