Html Question posted in
Some basic documentation can be found here.

Html – Calling removeChild on the parent element of a selected element completes without error but does not remove child

I am trying to select a group of html elements and delete them from their parent elements. Currently, I get no exceptions when running the code, but the child elements remain on the page. In addition, running the same code in the developer console works without issue.

HTML:

<div id="one">
  <img class="example">
</div>
<div id="two">
  <img class="example">
</div>
<div id="three">
  <img class="example">
</div>

JavaScript:

window.addEventListener("DOMContentLoaded", function () {
    const getSelector = (input) => {
        if (input.parentElement.id !== '') {
            return input.parentElement.id;
        }
        else {
            return getSelector(input.parentElement);
        }
    }

    if (window.location.href.includes("language_edit")) {
        document.querySelectorAll("img.example").forEach(e => {
                let location = getSelector(e);
                document.querySelector(`#${location}`).innerHTML = e.outerHTML.toString() + document.querySelector(`#${location}`).innerHTML;
                document.querySelector(`#${location}`).firstChild.style.position = "relative";
                e.parentElement.removeChild(e);
        });
    }
}, false);

If there is a better way to remove said elements, I would be happy to be told what it is, but I would also like to know if there is an issue with my code regardless.

EDIT: I have updated the code to include more of the original content for clarity.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Ultimately, I was able to solve the problem by using the insertBefore method to move the node rather than trying to delete it.


  2. 0

    try using this way

    e.parentElement.children.removeChild(e);

    Login or Signup to reply.
  3. 0

    When you set the outerHTML of the parent element, the <img> element was removed from the DOM and its parentElement property became null. You can verify that it is no longer attached to the document:

    window.addEventListener("DOMContentLoaded", function() {
  const getSelector = (input) => {
    if (input.parentElement.id !== '') {
      return input.parentElement.id;
    } else {
      return getSelector(input.parentElement);
    }
  }

  document.querySelectorAll("img.example").forEach(e => {
    let location = getSelector(e);
    document.querySelector(`#${location}`).innerHTML = e.outerHTML.toString() + document.querySelector(`#${location}`).innerHTML;
    document.querySelector(`#${location}`).firstChild.style.position = "relative";
    console.log('connected?', e.isConnected);
  });
}, false);
    <div id="one">
  <img class="example">
</div>
<div id="two">
  <img class="example">
</div>
<div id="three">
  <img class="example">
</div>

    Instead, you can clone the element, and use Element#before or Element#after to place it in the correct relative position.

    document.querySelectorAll("img.example").forEach(img => {
  const clone = img.cloneNode();
  clone.style.position = 'relative';
  img.before(clone);
  console.log(img.parentElement.outerHTML);
});
    <div id="one">
  <img class="example">
</div>
<div id="two">
  <img class="example">
</div>
<div id="three">
  <img class="example">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search