Добавление и управление элементами нумерованного списка

Question

Требуется чтобы клик по кнопке добавлял ФИО студента и список его дисциплин в конец нумерованного списка в документе, клик по пункту списка убирал его из списка. Сейчас мой код такой:

<html>
<head>
  <title>
    Работа 1
  </title>
</head>
<body>
  <br> <br>
  <h3> Названия учебных дисциплин: </h3>
  <section class='section'>
    <input type='checkbox' class='i-1' id="i1" value='Математика'>
    <label for="i1">Математика</label>

    <input type='checkbox' class='i-1' id="i2" value='Физика'>
    <label for="i2">Физика</label>

    <input type='checkbox' class='i-1' id="i3" value='Английский'>
    <label for="i3">Английский</label>

    <input type='checkbox' class='i-1' id="i4" value='Физкультура'>
    <label for="i4">Физкультура</label>

    <input type='checkbox' class='i-1' id="i5" value='История'>
    <label for="i5">История</label> <br> <br>
    <br> <br>
    <h3> Фамилии студентов: </h3>

    <input type='radio' class='i-2' id="i6" value='Иванов' checked name="rb1">
    <label for="i6">Иванов</label>

    <input type='radio' class='i-2' id="i7" value='Петрова' name="rb1">
    <label for="i7">Петрова</label>

    <input type='radio' class='i-2' id="i8" value='Смирнов' name="rb1">
    <label for="i8">Смирнов</label> <br> <br>

    <br> <br> <br> <button class='b-1'>Отправить</button>

  </section>

  <script>
    document.querySelector('.b-1').addEventListener('click', () => {
      paragraphList = document.querySelectorAll('.i-2')
      for (let i = 0, length = paragraphList.length; i < length; i++) {
        if (paragraphList[i].checked) {
          data = paragraphList[i].value;
          document.querySelector('.out-2').innerHTML += data + ' - ';
        }
      }
    });

    document.querySelector('.b-1').addEventListener('click', () => {
      paragraphList = document.querySelectorAll('.i-1')
      for (let i = 0, length = paragraphList.length; i < length; i++) {
        if (paragraphList[i].checked) {
          data = paragraphList[i].value;
          document.querySelector('.out-1').innerHTML += data + ' ';
        }
      }
      document.querySelector('.out-2').innerHTML += '<br>';
    });
  </script>

  <br><br><br><br><br>

  <div class='out-1 out-2'>

    <ol id='ol'>
      <li> test </li>
      <li> test </li>
    </ol>

  </div>
</body>
</html>

У меня по клику снизу страницы добавляется строка: Фамилия - выбранные дисциплины. Но, к сожалению, никак не получается сделать так, чтобы они добавлялись в конец нумерованного списка и удалялись по кнопке. Подскажите пожалуйста как это можно осуществить.

Answer 1

    document.querySelector('.b-1').addEventListener('click', () => {   
    disciplines = [...document.querySelectorAll('.i-1:checked')]
    .map(i => i.value)
    .join(' ,');
    
    fio = document.querySelector('.i-2:checked').value;
    
    document.querySelector('#ol').innerHTML+=makeItem(fio, disciplines); 
    });  
    
    function makeItem(fio, disciplines) {
        return '<li onclick="this.remove()">' + fio + (disciplines ? ' - ' + disciplines : '') + '</li>';
    }

.b-1 {
  margin: 10px;
}

label::after { 
  content: ""; 
  display: block
}

<h3> Названия учебных дисциплин: </h3> 
<section class='section'>
  <input type='checkbox' class='i-1' id="i1" value='Математика'>
  <label for="i1">Математика</label>
  <input type='checkbox' class='i-1' id="i2" value='Физика'>
  <label for="i2">Физика</label>
  <input type='checkbox' class='i-1' id="i3" value='Английский'>
  <label for="i3">Английский</label>
  <input type='checkbox' class='i-1' id="i4" value='Физкультура'>
  <label for="i4">Физкультура</label>
  <input type='checkbox' class='i-1' id="i5" value='История'>
  <label for="i5">История</label> <br> <br>

<h3> Фамилии студентов: </h3> 
  <input type='radio' class='i-2' id="i6" value='Иванов' checked name="rb1">
  <label for="i6">Иванов</label>
  <input type='radio' class='i-2' id="i7" value='Петрова' name="rb1">
  <label for="i7">Петрова</label>
  <input type='radio' class='i-2' id="i8" value='Смирнов' name="rb1">
  <label for="i8">Смирнов</label> <br> <br>

  <button class='b-1'>Отправить</button>
</section>

<ol id='ol'></ol>

БЛОГ НА HUSL

Добавление и управление элементами нумерованного списка

Ответы (1 шт):