CODEWITHSUNDEEP
javascriptjqueryhtmlcssclipboard.js
itsmnthn
itsmnthn

Reputation: 2152

How to hide the first child element of grand parent of the clicked element?

I am writing code that will copy the text on click using clipboard.js and copying working well I am using data attribute of HTML5 data-clipboard-text as per the clipboard.js document.

I intend to show a message for few second that "you copied the text" and that element is a child element of the second level parent of the clicked element but I am not able to find how to access clicked element->parent->parent->child->child

I have tried the various code of JQuery like $(this).closest('.col-md-3').find('.copied-msg'); or $(e.target).closest('.col-md-3').find('.copied-msg'); or $(e).closest('.col-md-3').find('.copied-msg');` also tried many this and searched but could not find a way.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="row" id="color-list">
            <div class="col-md-3 text-center mb-5">
                <div style="margin-bottom: 20%;">
                    <a class="copied-msg" style="display: none;"> <img src="assets/red-heart.svg" class="copy-msg-icon"> Yo! Copied </a>
                </div>
                <div class="card front justify-content-center text-center">
                    <a class="copy-msg-front clipboard" data-clipboard-text="linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%)">
                          Click to copy
                          <img class="copy-msg-icon" src="assets/sign-of-the-horns-apple.svg">
                        </a>
                </div>
                <div class="card text-center" style="background: linear-gradient(171.31deg, #FFF056 9.45%, #FDA47A 85.15%); z-index: 3;">
                    <a class="copy-msg clipboard" data-clipboard-text="linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%)">
                          Click to copy
                          <img class="copy-msg-icon" src="assets/sign-of-the-horns-apple.svg">
                        </a>
                </div>
                <div class="card" style="background: linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%); z-index: 2;">
                    <a class="copy-msg clipboard" data-clipboard-text="linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%)">
                          Click to copy
                          <img class="copy-msg-icon" src="assets/sign-of-the-horns-apple.svg">
                        </a>
                </div>
                <div class="card" style="background: linear-gradient(167.21deg, #5BE6FF 12.41%, #33ADFF 71.3%); z-index: 1;">
                    <a class="copy-msg clipboard" data-clipboard-text="linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%)">
                          Click to copy
                          <img class="copy-msg-icon" src="assets/sign-of-the-horns-apple.svg">
                        </a>
                </div>
                <div class="text-left m-2 ">
                    #1 theseekr
                </div>
            </div>
        </div>
    </div>

    <!-- Clipboard.js -->
    <script type="text/javascript" src="js/clipboard.min.js"></script>


    <script>
        var clipboard = new Clipboard('.clipboard');

        $(document).ready(function() {
            clipboard.on('success', function(e) {

                var p = $(this).closest('.col-md-3').find('.copied-msg');
                p.style.display = 'none';
                console.log(p);
                // setTimeout(function() {
                //     $(e.trigger).text("Copy");
                // }, 2500);
            });

            clipboard.on('error', function(e) {
                console.log("Your browser doesn't support")
            });
        });
    </script>
</body>

</html>

as in the code, I have a container with one row and now there is only one column that is col-md-3 but there will be more than 30,

each col-md-3 has 6 div, the first div has a that needs to be shown and hide when user click on 2,3,4,5 div the one with (.clipboard) class.

Upvotes: 0

Views: 253

Answers (2)

designtocode
designtocode

Reputation: 2245

It's working for me. Except I wasn't too sure why you were trying to hide the element when it was already hidden:

p.style.display = 'none';

See fiddle https://jsfiddle.net/0y8qfs2x/1/

I used show().fadeOut(500) //change to what ever time suits you and the e.trigger.

Upvotes: 0

Alisha
Alisha

Reputation: 101

$('a.copy-msg').on('click', function() {
  $(this).closest('.col-md-3').children().first().hide();
});

Upvotes: 0

Related Questions