How to hide the first child element of grand parent of the clicked element?
Question
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.
2 answers
solution1
0 2019-06-27 11:46:17
$('a.copy-msg').on('click', function() {
$(this).closest('.col-md-3').children().first().hide();
});
solution2
0 ACCPTED 2019-06-27 12:19:23
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.