Как получить имя родительского класса тега span в JavaScript?

Question

<div class="todo"> <h3>Have to understand js DOM</h3>
        <div class="ed-btn">
          <span id="delete" onclick="deleteTodo(event)"><i class="far fa-trash-alt"></i></a>
          </span>`; </div>

const deleteTodo = event => {   console.log(event.currentTarget); };

нажав на deleteTodo(событие) я только что нашел

      <span id="delete" onclick="deleteTodo(event)"><i class="far fa-trash-alt"></i></a>

но как я могу получить класс 'todo' или внутренний контент h3?

Answer 1

Если вы хотите получить доступ к родителю тега, вы можете использовать метод parentElement следующим образом:

document.getElementById("delete").parentElement

больше в документах здесь

Однако вы можете просто получить доступ к элементу h3 или todo напрямую:

document.getElementsByClassName("todo")

подробнее об этом здесь

Answer 2

Нажмите на текст "Некоторый текст", чтобы вызвать слушателя;)

Довольно просто:

parentElement позволяет получить родительский элемент.

className получит вам классы узла.

innerText достанет вам... внутренний текст;)

const deleteTodo = event => { 
  const target = event.currentTarget;
  const root = target.parentElement.parentElement;
  console.log('root class:', root.className);
  console.log('h3 content:', root.querySelector('h3').innerText); 
};

<div class="todo"> 
  <h3>Have to understand js DOM</h3>
  <div class="ed-btn">
    <span id="delete" onclick="deleteTodo(event)">
      <i class="far fa-trash-alt"></i>
      Some text
    </span>
  </div>
</div>

Надеюсь, это поможет вам!