How to add or remove specific element from the HTML DOM-CodePudding

I am having this confusion from a long time now, I want to add a specific element like the span in the example between the h1 and h2 tags, but when I click on the button, it added them as the last child of the container, I want to add at the middle of h1 and h2 tags, And on the remove button, I want to remove that specific element only instead of remove all elements, how can I remove that specific element when clicked on the button

const container = document.querySelector('.container');
const btnAdd = document.querySelector('.btnAdd');
const btnRemove = document.querySelector('.btnRemove');

btnAdd.addEventListener('click', () => {
  container.innerHTML  = `<span>Remove or Add me</span>`;
})

btnRemove.addEventListener('click', () => {
  container.innerHTML  = ``;
})

<div >
  <h1>Element</h1>
  
  <h2>Element</h2>
</div>

<button >Add</button>
<button >Remove</button>

CodePudding user response：

You need a few more lines of code to create a span element and work with it in the event handlers:

const container = document.querySelector('.container');
const btnAdd = document.querySelector('.btnAdd');
const btnRemove = document.querySelector('.btnRemove');
const h2 = document.querySelector('h2');
let addClicked = false;
const newNode = document.createElement('span');

btnAdd.addEventListener('click', () => {
  if(addClicked) {
    return;
  }
  newNode.innerHTML = 'Remove or Add me';
  container.insertBefore(newNode, h2);
  addClicked = true;
})

btnRemove.addEventListener('click', () => {
  newNode.remove();
  addClicked = false;
})

<div >
  <h1>Element</h1>
  
  <h2>Element</h2>
</div>

<button >Add</button>
<button >Remove</button>

CodePudding user response：

The other answer only lets you add/remove one single element.

I've updated your snippet as you can run it below - this lets you keep adding elements (by first creating a span element with javascript and then using the insertBefore method on the h2 element to insert it dynamically).

The remove button then always deletes the last element that was added, allowing for a more dynamic list.

You can take this one step further and add a delete button within each span, that upon being clicked, will delete any element wherever they are.

const container = document.querySelector('.container');
const btnAdd = document.querySelector('.btnAdd');
const btnRemove = document.querySelector('.btnRemove');
const lastElement = document.getElementById('last-element');

btnAdd.addEventListener('click', () => {
  const newSpan = document.createElement('span');
  newSpan.innerHTML = 'Remove or add me';
  container.insertBefore(newSpan, lastElement);
})

btnRemove.addEventListener('click', () => {
  const lastSpan = Array.from(document.querySelectorAll('.container > span')).pop();
  
  if (lastSpan) {
    container.removeChild(lastSpan);
  }
})

<div >
  <h1 id="first-element">Element</h1>
  
  <h2 id="last-element">Element</h2>
</div>

<button >Add</button>
<button >Remove</button>

CodePudding user response：

Add empty tag between h tags
Use textContent instead of innerHTML. Because it's more safe and fast than innerHTML
cf. differences between innerHTML and textContent

const btnAdd = document.querySelector('.btnAdd');
const btnRemove = document.querySelector('.btnRemove');
const text = document.querySelector('.text');

btnAdd.addEventListener('click', () => {
  text.textContent = 'Remove or Add me'
})

btnRemove.addEventListener('click', () => {
  text.textContent = '';
})

<div >
  <h1>Element</h1>
  <span ></span>
  <h2>Element</h2>
</div>

<button >Add</button>
<button >Remove</button>

EDIT

If you can't define element in html, you can try this code instead.

const container = document.querySelector(".container");
const h1 = document.querySelector(".container > h1");
const btnAdd = document.querySelector(".btnAdd");
const btnRemove = document.querySelector(".btnRemove");

btnAdd.addEventListener("click", () => {
  h1.insertAdjacentHTML("afterend", "<span>Remove or Add me</span>");
});

btnRemove.addEventListener("click", () => {
  const text = document.querySelector("h1   span");
  container.removeChild(text);
});

<div >
  <h1>Element</h1>
  <h2>Element</h2>
</div>

<button >Add</button>
<button >Remove</button>