Невозможно удалить флажок с помощью JavaScript

На самом деле, я хочу удалить определенный флажок div из в любое время. Как попытка дать функциональность, которую пользователь может добавить или удалить флажок.

Я написал код, который я пытаюсь добавить или убрать флажок, но когда я пытаюсь снять флажок, он не работает, и я не понимаю, в чем проблема.

Кто-нибудь может это исправить?

function uncheckAll2() {
  var inputs = document.querySelectorAll('input[name = "todo[]"]');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}
function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}
function addItem() {
  var ul = document.getElementById('ul'); //ul
  var li = document.createElement('li'); 
  var div = document.createElement('div'); //li
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.value = 1;
  checkbox.name = "todo[]";
  checkbox.className = "textt";
  


  div.appendChild(checkbox);

  var text = document.getElementById('texto');
  div.appendChild(document.createTextNode(text.value));
  li.appendChild(div);
  ul.appendChild(li);
}
function addElement(elementId, html) {
    // Adds an element to the document
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;
   
}
var checkId = 0;
function addcheck() {
    checkId++; // increment fileId to get a unique ID for the new element
    var html = '<a href = "" onclick = "javascript:removeElement( checkId ); return false;">Remove</a>';
    addElement(  checkId, html);
}
var button = document.getElementById('btn');
button.onclick = addItem , addcheck() ;

<body>
<h1>Add or remove element</h1>
<hr>
<br>
<ul  id = "ul">
</ul>
</div>
<button type = "button" id = "btn" onclick = "addItems ,  addFile() ">Add More</button>
<input type = "text" id = "texto">
<input type = "button" onclick = "uncheckAll2()" class = "btn btn-link" value = "Reset">

Переменная newElement нигде не определена

— 07.04.2019 08:37

вы пытались использовать консоль? щелкните правой кнопкой мыши, и вы увидите элемент проверки в браузере, а затем выберите консоль, и вы увидите, есть ли какие-либо ошибки в вашем коде, например, новый элемент не определен в вашем коде

— 07.04.2019 08:46

javascript jquery html

07.04.2019 08:30

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

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

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

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

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

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

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

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

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

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

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

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

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

вот рабочий код в порядке Эдди?

    function uncheckAll2() {
  var inputs = document.querySelectorAll('input[name = "todo[]"]');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}
function removeElement(linkElement) {
    // Removes an element from the document
    var element = linkElement.parentNode.parentNode;//to get to the li element

    element.parentNode.removeChild(element);
}
function addItem() {
  var ul = document.getElementById('ul'); //ul
  var li = document.createElement('li'); 
  var div = document.createElement('div'); //li

  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.value = 1;
  checkbox.name = "todo[]";
  checkbox.className = "textt";



  div.appendChild(checkbox);

  var text = document.getElementById('texto');
  div.appendChild(document.createTextNode(text.value));
  addcheck(div)
  li.appendChild(div);
  ul.appendChild(li);
}
function addElement(div,elementId, html) {
    // Adds an element to the document
    div.setAttribute('id', elementId);
    div.innerHTML += html;

}
var checkId = 0;
function addcheck(div) {
    checkId++; // increment fileId to get a unique ID for the new element
    var html = '<a class = "link" href = "" onclick = "javascript:removeElement( this ); return false;">Remove</a>';
    addElement( div, checkId, html);
}
var button = document.getElementById('btn');
button.onclick = addItem  ;

добавьте этот css просто для удобства чтения, но я думаю, вы добавите больше в css

<style>
       .link{
         padding-left: 10px;
       }
</style>

Это добавление ссылки для удаления перед флажком. Я хочу добавить это после флажка. Как я могу добиться этого в текущей ситуации? @юсеф али

— 07.04.2019 09:47

Братан, вчера вечером я думал, что, если мы также сделаем эти тексты флажков редактируемыми, как мы редактируем комментарий. Как мы этого добьемся?

— 08.04.2019 03:36

вы можете изменить тип ввода здесь checkbox.type = "checkbox"; поэтому все, что вы хотите, отредактируйте здесь, например, checkbox.type = "text";

— 08.04.2019 09:26

07.04.2019 09:02

Есть способ сделать это с помощью одной функции:

<body>

  <h1>Add or remove element</h1>
  <hr>
  <br>
    <div>
      <ul  id = "ul">
      </ul>
    </div>
  <button type = "button" id = "btn" onclick = "addItem()">Add More</button>
  <input type = "text" id = "texto">
  <input type = "button" onclick = "uncheckAll2()" class = "btn btn-link" value = "Reset">

</body>
</html>



<script type = "text/javascript">


function uncheckAll2() {
  var inputs = document.querySelectorAll('input[name = "todo[]"]');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}

var checkId = 0;
function addItem() {
  var ul = document.getElementById('ul'); //ul
  var li = document.createElement('li'); 
  var div = document.createElement('div'); //li
  var checkbox = document.createElement('input');

  checkbox.type = "checkbox";
  checkbox.value = 1;
  checkbox.name = "todo[]";
  checkbox.className = "textt";

  li.id = checkId;
  removeLink = '<a href = "" onclick = "javascript:document.getElementById(\''+checkId+'\').remove();return false;">Remove</a>';
  checkId++;

  div.appendChild(checkbox);
  var text = document.getElementById('texto');
  div.appendChild(document.createTextNode(text.value));
  div.innerHTML+=removeLink;
  li.appendChild(div);
  ul.appendChild(li);
}



</script>

07.04.2019 11:15

Другие вопросы по теме

Есть ли способ показать кнопку на основе свободного места в коробке, сделанной

Получение пустых массивов при поиске элементов по классу с помощью Jquery

Как создать пагинатор django с помощью ajax?

Пользовательский скрипт, который я сделал, частично работает. Любое исправление?

ScrollTo() и jquery scrollTop() не работают в Chrome

Выберите конкретный div, созданный с использованием цикла for в функции, которая находится внутри цикла for

JQuery/Bootstrap 4: использование window.location.hash для получения модального хэша в URL-адресе дает «#undefined»

Изменить конкретный параметр в URL-адресе на основе выбора раскрывающегося списка с помощью JavaScript

Оптимизированное решение для преобразования чисел в проценты

Как заменить первое вхождение каждой буквы в списке?

Невозможно удалить флажок с помощью JavaScript

Ответы 2

Другие вопросы по теме

Похожие вопросы