如何隐藏被点击元素grand parent的第一个child元素？

Question

我正在编写代码，使用 clipboard.js 复制点击时的文本并且复制效果很好我正在使用 HTML5 data-clipboard-text 的数据属性，根据 clipboard.js文件.

我打算显示一条消息 "you copied the text" 并且该元素是被单击元素的第二级 parent 的 child 元素，但我无法找到如何访问被点击的元素->parent->parent->child->child

我已经尝试了 JQuery 的各种代码，例如 $(this).closest('.col-md-3').find('.copied-msg'); 或 $(e.target).closest('.col-md-3').find('.copied-msg'); 或 $(e).closest('.col-md-3').find ('.copied-msg');` 也尝试了很多这个并进行了搜索但找不到方法。

<!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>

在代码中，我有一个容器，只有一行，现在只有一列是 col-md-3 但会有超过 30，

每个col-md-3有6个div，第一个div有一个需要在用户点击2,3,4,5时显示和隐藏div 带有 (.clipboard) class.

的那个

Answer 1

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

Answer 2

它对我有用。除了我不太清楚你为什么要隐藏已经隐藏的元素：

p.style.display = 'none';

参见 fiddle https://jsfiddle.net/0y8qfs2x/1/

我使用了 show().fadeOut(500) //change to what ever time suits you 和 e.trigger。

如何隐藏被点击元素grand parent的第一个child元素？

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

html

javascript

css

jquery

clipboard.js