как удалить кнопкой мыши элемент li?

137

16 декабря 2020, 06:00

мне нужно по нажатию лкм на выбранный элемент li его удалить, а следующий элемент встал на место удаленного

document.addEventListener('DOMContentLoaded', function() { 
  const btn_Hobbies = document.getElementById('buttonHobbies'), 
        input_Hobbies = document.getElementById('hobbies'); 
 
  btn_Hobbies.addEventListener('click', () => { 
 
      if (input_Hobbies.value.length > 0) { 
        let newLi = document.createElement('li'); 
          newLi.innerHTML = input_Hobbies.value; 
          list.insertBefore(newLi, list.children[0]); 
          } 
    }); 
 
    // удаление интереса 
 
});

  <div class="div_hobbies"> 
  <label for="hobbies">Интересы</label> 
  <input type="text" class="inputHobbies" id="hobbies" placeholder="Ваш интерес?" name="" value=""> 
  <input type="button" id ="buttonHobbies" name="" value="Добавить интерес"> 
  </div> 
  <ul id = "list"> 
  </ul> 
  </form> 
  </div>

Answer 1

как то так

document.addEventListener('DOMContentLoaded', function() { 
  const btn_Hobbies = document.getElementById('buttonHobbies'), 
        input_Hobbies = document.getElementById('hobbies'), 
        itemsList = document.getElementById('list'); 
 
  btn_Hobbies.addEventListener('click', () => { 
 
      if (input_Hobbies.value.length > 0) { 
        let newLi = document.createElement('li'); 
          newLi.innerHTML = input_Hobbies.value; 
          list.insertBefore(newLi, list.children[0]); 
          } 
    }); 
     
   itemsList.addEventListener('click', function(event){ 
      let target = event.target; 
      if(target.tagName === 'LI') { 
        //Удаляем 
        target.remove(); 
      } 
       
   }); 
 
 
});

<div class="div_hobbies"> 
  <label for="hobbies">Интересы</label> 
  <input type="text" class="inputHobbies" id="hobbies" placeholder="Ваш интерес?" name="" value=""> 
  <input type="button" id ="buttonHobbies" name="" value="Добавить интерес"> 
  </div> 
  <ul id = "list"> 
  </ul> 
  </form> 
  </div>

Answer 2

Так? (код не трогал, только добавил строчку удаления)

document.addEventListener('DOMContentLoaded', function() { 
  const btn_Hobbies = document.getElementById('buttonHobbies'), 
        input_Hobbies = document.getElementById('hobbies'); 
 
  btn_Hobbies.addEventListener('click', () => { 
 
      if (input_Hobbies.value.length > 0) { 
        let newLi = document.createElement('li'); 
          newLi.innerHTML = input_Hobbies.value; 
          list.insertBefore(newLi, list.children[0]); 
          /*Добавил только эту строчку*/ 
          newLi.addEventListener('click', function(){ this.remove(); }); 
          } 
    }); 
});

<div class="div_hobbies"> 
  <label for="hobbies">Интересы</label> 
  <input type="text" class="inputHobbies" id="hobbies" placeholder="Ваш интерес?" name="" value=""> 
  <input type="button" id ="buttonHobbies" name="" value="Добавить интерес"> 
</div> 
<ul id = "list"> 
</ul>