Как удалить дочерний узел Specifi c - PullRequest
Новая
       11

Как удалить дочерний узел Specifi c

3 голосов
/ 11 июля 2020

У меня следующий Код 

  <script>        
      function delete(){
          var e = document.getElementById('parent');
          e.removeChild(e.children[0]);
      }
</script>
  <div id="parent">
      <div id="child">
          <input type="text" placeholder="name"> 
          <button onclick="delete()"> delete</button>
      </div>
    
      <div id="child">
          <input type="text" placeholder="age"> 
          <button onclick="delete()"> delete</button>
      </div>
  </div>

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

Ответы [ 4 ]

3 голосов
/ 11 июля 2020

это полностью рабочий пример. 

function deleteNode(item){
    item.parentNode.remove()
}
 <div id="parent">
     <div id="child">
      <input type="text" placeholder="name"> 
      <button onclick="deleteNode(this)"> delete</button>
     </div>

     <div id="child">
      <input type="text" placeholder="age"> 
      <button onclick="deleteNode(this)"> delete</button>
     </div>
</div>
0 голосов
/ 11 июля 2020

Прежде всего, delete - это зарезервированное ключевое слово , вы не можете использовать его для имени функции.

Во-вторых, вы должны передать ссылку на элемент, по которому щелкают. Это может быть достигнуто путем передачи аргумента this вашему обработчику onclick: 

<button onclick="deleteParent(this)"> delete</button>

Это приведет к следующему 

 <div id="parent">
     <div>
      <input type="text" placeholder="name"> 
      <button onclick="deleteParent(this)"> delete</button>
     </div>

     <div>
      <input type="text" placeholder="age"> 
      <button onclick="deleteParent(this)"> delete</button>
     </div>
 </div>

 <script>
   function deleteParent(btn){
     btn.parentNode.remove();
   }
 </script>

Вы также не должны использовать тот же id на нескольких элементах.

0 голосов
/ 11 июля 2020

Посмотрите на эти две строки: 

var e = document.getElementById('parent');    
e.removeChild(e.children[0]);

здесь вы получаете элемент по его идентификатору, а идентификатор - «родительский». Это всегда будет давать вам div.

Затем вы удаляете первый дочерний элемент e.

Вам нужен другой метод получения элемента для удаления!

Первый шаг было бы посмотреть на цель вашего обработчика событий: 

   function delete(ev){
     var target = ev.target;
     console.log("the element that was clicked is ", target);
     // continue from here
   }
0 голосов
/ 11 июля 2020

попробуйте это: 

function delete(){
    $(this).parent().remove()
}

, и вы не можете использовать тот же id для разных div

...