Question

I’m a beginner developer. I’m trying to hide a div that is dynamically added to the page by a 3rd party JavaScript for aesthetic purposes.

The problem is that the div has no id attribute; is this even possible? Do divs have any inherent attributes based on the order in which they load? Or is there any way to search for a string of text and hide the element?

For example, removing <div>happy New year</div> based on its text happy New year.

Answer 1

You can select the relevant elements first and iterate through them until you find what you want.

In JQuery it can be done like this:

// select relevant elements
var elements = $('div');

// go through the elements and find the one with the value
elements.each(function(index, domElement) {
    var $element = $(domElement);

    // does the element have the text we're looking for?
    if ($element.text() === "happy New year") {
        $element.hide();
            // hide the element with jQuery
        return false; 
            // jump out of the each
    }
});

Note that the code is a bit brittle and completely depends on the contents of the elements. Here are the relevant JQuery api docs:

• Selectors in jQuery ($(...))
• jQuery.each() – for going through the jquery objects array
• jQuery.text() – for getting the value (there are small but noticable discrepancies between the browsers on how you do this in plain javascript)
• jQuery.hide() – for hiding the element with CSS style display: none

Note that you can be more specific with your selection say you have the following code:

<div class="message">
    <div>happy New year<div>
</div>

You can select the element with:

var domElement = $('.message div')[0]; // hopefully it only happens once