Удаление значений из input, по клику

@Nenado88 · Регистрация: 26.03.2013

Author24 — интернет-сервис помощи студентам

Кликая по ссылкам, вывожу в input а также в DIV "Вывод №2" их значения через запятую, с помощью JS.
Вопрос такой: как удалять эти значения из input`а, кликая по ним в DIV "Вывод №2"?

Javascript

var First = true;
function Zack (MenuTitl) {
    var zakaz = document.getElementsByName('zakaz')[0];
    var dop=zakaz.value+', ';
     if(First) {First=false;dop="";}
    zakaz.value = dop + MenuTitl.innerHTML; 
 
    var div = document.getElementById('myLink');
    var e    = document.createElement('a');
    e.href = 'http://google.ru';
    e.title = dop;
    e.appendChild(document.createTextNode(MenuTitl.innerHTML));
    div.appendChild(e);      
}

HTML5

<input class="foxtext" type="text"  name="zakaz">
<a href="#" name="menu-title" href="#" onclick="Zack(this);return false"'>Первый</a>
<a href="#" name="menu-title" href="#" onclick="Zack(this);return false"'>Второй</a>
 
<div id="myLink">Вывод №2</div>

@Пифагор · 12.03.2017, 18:34

Сообщение от Nenado88

как удалять эти значения из input`а, кликая по ним в DIV "Вывод №2"?

как вариант, заключать их при добавлении в теги. Например, span.
Ниже пример-идея:

PHP/HTML

<div id="myLink"><span>Вывод №1, </span><span>Вывод №2</span></div>
<script>
myLink.addEventListener('click', function(e){
  if(e.target.tagName === 'SPAN')
    myLink.removeChild(e.target);
})
</script>

@Nenado88 · 13.03.2017, 09:30 **[ТС]**

Не выходит, они добавляются уже не в "<span>", а после него. И вряд ли они будут удалятся из input`а

@mrtoxas · 13.03.2017, 12:08

PHP/HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .out-link{padding:0 2px;}
  </style>
</head>
<body>
  <div id="form">
    <input id="input" type="text" />
    <a class="link" href="#">Первый</a>
    <a class="link" href="#">Второй</a>
    <a class="link" href="#">Третий</a>
    <a class="link" href="#">Четвертый</a>
    <br />
    <div id="out"></div>
  </div>
  <script>
    var form = document.getElementById('form'),
      input = document.getElementById('input'),
      divOut = document.getElementById('out');
 
    form.addEventListener('click', function(e) {
      var target = e.target;
      if (target.className == 'link') {
        e.preventDefault();
        input.value += (input.value == '') ? target.textContent : ', ' + target.textContent;
        var outLink = document.createElement('a');
        outLink.textContent = target.textContent;
        outLink.href = "#";
        outLink.classList.add("out-link");
        divOut.appendChild(outLink);
      }
      if (target.className == 'out-link') {
        var outLinks = target.parentElement.getElementsByClassName('out-link');
        for (i = 0; i < outLinks.length; i++) {
          if (outLinks[i] == target) {
            var arrInp = input.value.split(', ');
            arrInp.splice(i, 1);
            target.remove();
            input.value = arrInp.join(', ');
            break;
          }
        }
      }
    });
  </script>
</body>
</html>

@Nenado88 · 13.03.2017, 13:10 **[ТС]**

Огромное спасибо!

@Nenado88 0 / 0 / 0 Регистрация: 26.03.2013 Сообщений: 79
	13.03.2017, 09:30 [ТС]	3
	Не выходит, они добавляются уже не в "<span>", а после него. И вряд ли они будут удалятся из input`а 0

@Nenado88 0 / 0 / 0 Регистрация: 26.03.2013 Сообщений: 79
	13.03.2017, 13:10 [ТС]	5
	Огромное спасибо! 0

Удаление значений из input, по клику

Решение