Добавление и удаление дочернего элемента - PullRequest
Новая
       1

Добавление и удаление дочернего элемента

2 голосов
/ 28 апреля 2019

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

<!DOCTYPE html>
<html>
<head>
    <title>JS DOM</title>
</head>
<body>
    <div>
        <h1 id="heading">JS DOM</h1>
        <ul>
            <li>
                <span>John</span>   
                <button class="del">Delete</button>
            </li>
            <li>    
                <span>Paul</span>   
                <button class="del">Delete</button> 
            <li>
                <span>George</span> 
                <button class="del">Delete</button>
            </li>   
            <li>
                <span>Ringo</span>  
                <button class="del">Delete</button>
            </li>
        </ul>
        <input id="input"  placeholder="Add Name">
        <button class="add">Add</button>
    </div>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

let x = document.querySelector("ul");
let btn = document.querySelectorAll(".del")
let btn1 = document.querySelector(".add");

 x.addEventListener("click", function(e){
    if (e.target.className == "del"){
        const li = e.target.parentElement;
        x.removeChild(li)
    } 
 })

btn1.addEventListener("click", function(){
    let z = (input.value);
    let span = document.createElement("span");
    let node = document.createElement("li");
    let text = document.createTextNode(z);
    let x = document.querySelector("ul");

    let addBtn = document.createElement("button");
    addBtn.innerHTML = "Delete"

    span.appendChild(text);
    x.appendChild(node);
    node.appendChild(span);
    node.appendChild(addBtn);
});

кажется, что вновь добавленные имена не наследуют функцию my delete. Я видел ответы здесь, но они уже используют JQuery, есть ли способ исправить это, используя только JS? Я пишу JS уже около 2 недель, и мне очень помогло бы, если бы кто-нибудь объяснил ответ здесь.

Большое спасибо!

1 Ответ

2 голосов
/ 28 апреля 2019

Вы почти на месте - ваш обработчик делегирования событий проверяет 

if (e.target.className == "del"){
    const li = e.target.parentElement;
    x.removeChild(li)
}

Итак, каждой кнопке удаления необходим класс del, чтобы обработчик мог ее распознать и использовать removeChild.Эти классы присутствуют в вашем исходном HTML: 

<button class="del">Delete</button>

, но не в ваших добавленных элементах: 

let addBtn = document.createElement("button");
addBtn.innerHTML = "Delete"
// ...
node.appendChild(addBtn);

Установите addBtn s className в del и всеработы: 

addBtn.className = 'del';


let x = document.querySelector("ul");
let btn = document.querySelectorAll(".del")
let btn1 = document.querySelector(".add");

x.addEventListener("click", function(e) {
  if (e.target.className == "del") {
    const li = e.target.parentElement;
    x.removeChild(li)
  }
})

btn1.addEventListener("click", function() {
  let z = (input.value);
  let span = document.createElement("span");
  let node = document.createElement("li");
  let text = document.createTextNode(z);
  let x = document.querySelector("ul");

  let addBtn = document.createElement("button");
  addBtn.className = 'del';
  addBtn.innerHTML = "Delete"

  span.appendChild(text);
  x.appendChild(node);
  node.appendChild(span);
  node.appendChild(addBtn);
});
<div>
  <h1 id="heading">JS DOM</h1>
  <ul>
    <li>
      <span>John</span>
      <button class="del">Delete</button>
    </li>
    <li>
      <span>Paul</span>
      <button class="del">Delete</button>
      <li>
        <span>George</span>
        <button class="del">Delete</button>
      </li>
      <li>
        <span>Ringo</span>
        <button class="del">Delete</button>
      </li>
  </ul>
  <input id="input" placeholder="Add Name">
  <button class="add">Add</button>
</div>

Вместо этого вы можете также назвать его deleteBtn, поскольку он удаляет текущую строку.Вы также можете назначить textContent элемента вместо добавления createTextNode, чтобы сделать ваш код менее многословным.Кроме того, let node особо не описывает, что содержит переменная node - возможно, вместо этого назовите ее li, потому что она всегда ссылается на <li>: 

const x = document.querySelector("ul");
const btn = document.querySelectorAll(".del")
const btn1 = document.querySelector(".add");

x.addEventListener("click", function(e) {
  if (e.target.className == "del") {
    e.target.parentElement.remove();
  }
})

btn1.addEventListener("click", function() {
  const span = document.createElement("span");
  const li = document.createElement("li");

  const deleteBtn = document.createElement("button");
  deleteBtn.className = 'del';
  deleteBtn.innerHTML = "Delete"

  span.textContent = input.value;
  x.appendChild(li);
  li.appendChild(span);
  li.appendChild(deleteBtn);
});
<div>
  <h1 id="heading">JS DOM</h1>
  <ul>
    <li>
      <span>John</span>
      <button class="del">Delete</button>
    </li>
    <li>
      <span>Paul</span>
      <button class="del">Delete</button>
      <li>
        <span>George</span>
        <button class="del">Delete</button>
      </li>
      <li>
        <span>Ringo</span>
        <button class="del">Delete</button>
      </li>
  </ul>
  <input id="input" placeholder="Add Name">
  <button class="add">Add</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...