Remove class elements with JS-CodePudding

via an A/B Testing tool, I want to inject JS to remove following existing element on my website.

<div  title="Test">
      <div title="Test"  data-bg="/media/example"></div>
      <div title="Test"  data-bg="/media/example"></div>
      <div title="Test"  data-bg="/media/example" style="background-image: url(example);"></div>
 </div>

This should be happens with siteloading. Ofc I can "hide" this element via css but it won't help for my case, because I want to show other elements on this spot.

jQuery is not supported I've tested it with $('.wrap-image').removeClass('wrap-image') but it didn't work.

Would be awesome if you can tell me the solution (including the writing of those div tags - thank you!)

Hope you can help me, Thank you!

CodePudding user response：

The javascript code to remove this element is:

document.getElementsByClassName("wrap-image")[0].remove()

This is going to work 100% only if you don't have other elements with the class "wrap-image", because the code is getting all array of elements with this class name and out of this array the first element. If you have other elements with the same class name, you can add id to this div and then:

document.getElementById("wrap-image").remove()

CodePudding user response：

You can use document.querySelector with the remove method (no jQuery). The code to do this could be:

document.querySelector(".wrap-image").remove();

This works by selecting the first element with the class wrap-image and then removing the element from the DOM tree.

CodePudding user response：

To remove all elements with this class you can do this (button for demonstration).

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

document.getElementById("btn").addEventListener("click", () => removeElementsByClass('wrap-image'));
//**to do it on page load uncomment this**  window.onload = () => removeElementsByClass('wrap-image')

<!doctype html>
<html>
<head>
</head>
<body>
<div  title="Test">
      <p >one of the elements</p>
      <div title="Test"  data-bg="/media/example"></div>
      <div title="Test"  data-bg="/media/example"></div>
      <div title="Test"  data-bg="/media/example" style="background-image: url(example);"></div>
 </div>
 <button id='btn'>remove elements</button>
</body>
</html>

To do it on page load, uncomment the line in the code.

CodePudding user response：

Hey everybody and thank you for your answers so far. Further problems:

The element 'wrap-image' exists multiple times one the site so I may can't use

document.querySelector(".wrap-image").remove(); This works by selecting the first element with the class wrap-image and then >removing the element from the DOM tree.

document.getElementsByClassName("wrap-image")[0].remove() This is going to work 100% only if you don't have other elements with the class >"wrap-image", because the code is getting all array of elements with this class >name and out of this array the first element. If you have other elements with the >same class name, you can add id to this div and then:

document.getElementById("wrap-image").remove()

& I can't give the element an unique ID because the test runs on multiple sites where all are using the same classes with other content.