В чём ошибка при удалении блока в JS?

299

01 августа 2017, 19:28

Есть скрипт добавления блоков на страницу https://jsfiddle.net/7su5s63d/

// Добавлене блоков
var div = '';
var next_id = 3;
add_block.onclick = function() {
    next_id++;
    var div = document.createElement('div');
    div.id = 's'+next_id;  
    div.className = 'text block';
    var template = '<div class="labels-intro"><input type="text" class="form-control form-about w100" placeholder="Введите имя поля"></div><span class="glyphicon glyphicon-remove test" aria-hidden="true" id="del'+next_id+'">удалить</span>';
    div.innerHTML = template;
    main.appendChild(div);
    // Удаление блоков
    document.getElementById(div.id).addEventListener('click', function(e) {        
        this.remove();
    });
};

Проблема в том, что в добавляемом блоке есть input и по задумке удаляться блок должен только когда в нём будет нажат span со словом удалить, но удаляется блок даже если просто на input нажать. Т.е. ввести в input ничего нельзя, он сразу удаляется.

Answer 1

Нужно событие click вешать конкретно на span, а вы искали елемент по ид div.id тоесть это всетаки див, вот он при любом клике и удалялся

// Добавлене блоков 
var div = ''; 
var next_id = 3; 
add_block.onclick = function() { 
  next_id++; 
  var div = document.createElement('div'); 
  div.id = 's' + next_id; 
  div.className = 'text block'; 
  var template = '<div class="labels-intro"><input type="text" class="form-control form-about w100" placeholder="Ваше имя"></div><span class="glyphicon glyphicon-remove test" aria-hidden="true" id="del' + next_id + '">удалить</span>'; 
  div.innerHTML = template; 
  main.appendChild(div); 
 
  document.getElementById('del' + next_id).addEventListener('click', function(e) { 
    div.remove(); 
  }); 
};

<div id="main"> 
  <span id="add_block">+ добавить блок</span><br> 
  <div id="s1" class="text block">one</div> 
  <div id="s2" class="text block">two</div> 
  <div id="s3" class="text block">three</div> 
</div>

Answer 2

     
    // Добавлене блоков 
var div = ''; 
var next_id = 3; 
add_block.onclick = function() { 
    next_id++; 
    var div = document.createElement('div'); 
    div.id = 's'+next_id;   
    div.className = 'text block'; 
    var template = '<div class="labels-intro"><input type="text" class="form-control form-about w100" placeholder="Ваше имя"><span class="glyphicon glyphicon-remove test" aria-hidden="true" id="del'+next_id+'">удалить</span></div>'; 
    div.innerHTML = template; 
    main.appendChild(div); 
    // Удаление блоков 
    document.getElementById('del'+next_id).addEventListener('click', function(e) {         
        this.parentNode.remove(); 
    });     
};

<div id="main"> 
  <span id="add_block">+ добавить блок</span><br> 
  <div id="s1" class="text block">one</div> 
  <div id="s2" class="text block">two</div> 
  <div id="s3" class="text block">three</div> 
</div>