Help kids find solutions

Here is the HTML code I am working with:

<div class = "touch" onclick="do(this)">
  <span>text01</span>
  <span>text02</span>
  <span>text03</span>
  <span>text04</span>
  <div class = "findMe">andHideMe</div>
</div>
<div class = "touch" onclick="do(this)">
  <span>text01</span>
  <span>text02</span>
  <div class = "findMe">andHideMe</div>
</div>
<div class = "touch" onclick="do(this)">
  <span></span>
  <span>just</span>
  <div class = "findMe">andHideMe</div>
</div>

Upon clicking on TOUCH, I want to manipulate the 'FindMe' DIV element.

How can I target and manipulate the 'FindMe' element within the clicked TOUCH div using JavaScript?

function do(obj)
{
    var se = obj.childNodes;
    for (var t = 0; t < obj.childNodes.length; t++)
    {
        if (se[t].className == 'findMe')
        {
            se[t].className.style.display = 'none';
        };

    }
}

Answer №1

Searching for a jQuery div Class.

Creating a variable to find a div with the class name 'findMe': var findMeDivClass = $('.findMe');

Also searching for an id: var findMeDivId = $('#findMe');

And locating an element by attribute: var findMeDivAttr = $('[name="findMe"]');

Answer №2

Modify:

se[t].className.style.display = 'none';

to

se[t].style.display = 'none';

You might want to incorporate a basic hasClass function such as:

function hasClass(element, className) {
    var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
    return re.test(element.className);
}

// or

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

Then utilize it like:

if (hasClass(se[t], className)) {
  // perform actions
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with zeroLineColor and zeroLineWidth not functioning properly for the x-axis within Chartjs

Looking to customize the width and color of the x-axis in Chartjs? While it's straightforward for the y-axis using zeroLineColor and zeroLineWidth, achieving the same effect for the x-axis seems trickier. If you try adding: ticks: { beginAtZero: tr ...

An error occurred: [object Object] does not contain the function 'bootstrapDatepicker'

After spending countless hours searching for a solution, I continue to encounter the dreaded 'Uncaught TypeError' without any successful resolutions. The issue seems to stem from a clash between tribe-events-ajax-calendar.js and foundation.min.j ...

What are some ways to incorporate JQuery with getElementById?

i am trying to retrieve all input elements within a form using JavaScript formEditable = document.getElementById("formid").getElementsByTagName("input"); However, I would like to achieve the same result using jQuery instead formEditable = $("#formid").f ...

Issue with resetting Knockout.JS array - unable to make it work

Hey everyone, check out the project I'm currently working on over at Github: https://github.com/joelt11753/Udacity-map In this project, I have a menu generated from a list that can be filtered using an HTML select element. Initially, all items are di ...

Calling JavascriptInterface in an H5 environment is not permitted

Utilizing the power of vue, I created an immersive h5 page within the application framework. The seamless connection between the page and the app relies on the use of window.JSInterface for communication. My current challenge lies in invoking the JSInterfa ...

How One Simple Click Can Impact Every Button in jQuery Ajax操作

Whenever I try to click a button that should only affect a specific id, it ends up affecting every button on the page by sending data to our API as well. You can check out a snapshot of my page here. Each row has a unique id, but when I click the vote butt ...

While observing a camera in motion, the particles tinted by texture display sporadic flickering on WebGL and Three.js

Check out this jsfiddle I created to illustrate an issue with particles "flickering" when colored using a texture and the camera is moving. Update: The problem occurs even when there is no animation or movement on the particles. If you notice flickering o ...

Having trouble accessing a React component class from a different component class

I just started learning reactjs and javascript. For a simple project, I'm working on creating a login and registration form. The issue I'm facing is that when a user enters their email and password and clicks 'register', instead of movi ...

The journey of data starting from a PHP file, moving through JavaScript, and circling back to PHP

I've encountered an interesting challenge with my PHP file and Wordpress shortcode. It all starts when the shortcode is embedded in a webpage, triggering a php function from within the file. This function executes an SQL query to extract data, then s ...

Eliminate the classes that were inserted through Jquery

I'm currently working on an accordion and I've encountered an issue with jQuery adding classes that I don't want. How can I prevent jQuery from adding certain classes? The code below is what I have, but for some reason, jQuery keeps adding t ...

Using JavaScript, extract individual objects from a JSON object

Recently, I've been tasked with displaying items from a JSON-file in a well-organized manner. However, the format of the JSON file is unfamiliar to me. The code snippet provided below pertains to this task: function readFile(file) { var rawFile = ...

Function in Node.js/JavaScript that generates a new path by taking into account the original filepath, basepath, and desired destination path

Is there a custom function in Node.js that takes three arguments - filePath, basePath, and destPath - and returns a new path? For example: Function Signature Example var path = require('path'); // Could the `path` module in Node be useful here? ...

Utilizing AngularJS ng-repeat, generate dynamic HTML content by calling a function to retrieve data

Just starting out with angularjs and trying to unravel the mystery here. Using ng-repeat: <li class="widget flip-container" ng-repeat="widget in widgets"> <div class="widgetContent" ng-bind-html="getData(widget.UserWidgetId,widg ...

javascript change string into an array of objects

let dataString = "{lat: -31.563910, lng: 147.154312};{lat: -33.718234, lng: 150.363181};{lat: -33.727111, lng: 150.371124}"; let dataArray = dataString.split(';'); Produces the following output: let dataArray = [ "{lat: -31.563910, lng: 147 ...

The response header does not contain a valid JWT token

Here's a function I've implemented to authenticate users by creating a response header: function verifyUser(res, id) { const payload = { id } const token = jwt.sign(payload, config.JWT_KEY, { expiresIn: '24h' ...

Combining a standard JSS class with Material-UI's class overrides using the classnames library

I am exploring the method of assigning multiple classes to an element in React by utilizing the classnames package from JedWatson, along with Material-UI's "overriding with classes" technique. For reference, you can see an instance in MUI's docu ...

Navigating through information using Axios in React JS

Issue Currently, I am facing a challenge while trying to iterate through the data retrieved from an API call using Axios in a React.js application. The response is successfully received, but I am encountering difficulties when trying to display the inform ...

I keep encountering the issue "auth is not a function" every time I try to call my authentication function within a route

Whenever a user requests sensitive information from the backend, I need to call an authenticated function. However, I am facing an issue where this function is not running when called. Below is the code for my authentication function: const auth = (req,re ...

What is the best way to update the state of object.item[n] that is nested within an array, which in turn is nested within

A unique data structure is set up in the following way: const library = [ { procedureName:'Build Foundations', id:1, tasks:[ { taskName:'dig at least 1m deep', isCompleted:false, procedureId:1 }, ...

Rendering basic JSON data from the console to an HTML page using Angular

I have been utilizing openhab for sensor monitoring. To extract/inject the items(things), sensor properties, and room configuration through a web interface, I am making use of openhab's REST queries which can be found here - REST Docs. Wanting to cre ...