Unable to remove div element

Currently, I am working on writing a code for a webpage with specific functionalities. I need to display a button and an embedded YouTube video. When the user clicks on the video, they should be redirected to a different link (not YouTube) and the video should disappear. Additionally, there should be a separate button to remove the video entirely. I have managed to make the video clickable to a link, but I am encountering issues with removing the video, both when clicked and when using the removal button.

.the-click {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: white;
  opacity: 0;
}
.container {
  position: relative;
}
.myxButton {
  -moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
  -webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
  box-shadow: inset 0px 1px 0px -1px #cf866c;
  background-color: #d0451b;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #942911;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
  background-color: #bc3315;
}
.myxButton:active {
  position: relative;
  top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
  <button class="myxButton" onclick=$( '#div1').remove();>« Stop Video »</button>
  <div id="div1" align="center" class="container" onclick=$( '#div1').remove();>
    <a href="http://www.google.com " class="the-click" target="_blank"></a>
    <iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&amp;autoplay=1&amp;controls=0&amp;fs=0&amp;rel=0&amp;showinfo=0&amp;disablekb=1&amp;wmode=opaque" frameborder="0"></iframe>
  </div>
</center>

Console result when clicking

I've also tried:

onclick="$('#div1').remove();"
onclick='$('#div1').remove();'
#same with# onclick=$('#div1').hide();

Thank you.

javascriptjqueryhtmlcss

Answer №1

To implement this functionality, it is recommended to use the following syntax. Remove the inline onClick attribute from the button and utilize jQuery to add the event listener.

Your button's HTML code should be as simple as:

<button class="myxButton">« Stop Video »</button>

The rationale behind removing the inline attribute is due to its deprecation (although some browsers still support it). In the future, most browsers will likely cease to support it. This approach also helps in maintaining a clear separation between HTML and JavaScript code, which is beneficial for maintenance purposes.

Below is a functional code snippet to achieve this:

$('.myxButton').on('click',function(){
  $('#div1').remove();
});
.the-click {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: white;
  opacity: 0;
}
.container {
  position: relative;
}
.myxButton {
  -moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
  -webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
  box-shadow: inset 0px 1px 0px -1px #cf866c;
  background-color: #d0451b;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #942911;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
  background-color: #bc3315;
}
.myxButton:active {
  position: relative;
  top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<center>
  <button class="myxButton">« Stop Video »</button>
  <div id="div1" align="center" class="container">
    <a href="http://www.google.com " class="the-click" target="_blank"></a>
    <iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&amp;autoplay=1&amp;controls=0&amp;fs=0&amp;rel=0&amp;showinfo=0&amp;disablekb=1&amp;wmode=opaque" frameborder="0"></iframe>
  </div>
</center>

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

Preserve user-inputted text from jQuery within a div container

With the help of the knowledgeable individuals here, I successfully created a prototype to address an issue I had encountered. The problem involved using a textbox input with a password requirement to update an HTML element. Although everything is functio ...

javascriptjqueryhtmldynamictext

What are the challenges associated with using replaceChild?

function getLatestVideos(url) { var http = new XMLHttpRequest(); http.open("GET", url, false); // false for synchronous request http.send(null); return http.responseText; } var videosText = getLatestVideos("https://www.googleapis.com/youtube/v3/se ...

javascripthtmlbootstrap-5

Bootstrap 5 and Vue 3 team up to create a stunning masonry layout

I've been struggling to find a proper solution for implementing a masonry layout in Vue 3 with Bootstrap. I tried using Bootstrap 5 cards with the Masonry CDN, but it resulted in squeezed and overlapping cards, failing to achieve the desired layout. I ...

htmlcssvuejs3bootstrap-5

Can you explain the distinction between Array() and [] in Javascript, and when would it be preferable to use one over the other?

Similar Question: Understanding the difference between "new Array()" and "[]" in JavaScript array declaration When working with JavaScript, you have the option to create a new array using: var arr = new Array(); or simply using: var arr2 = []; Wha ...

javascriptarraysliterals

IE9 not triggering jQuery's .load method

I am facing an issue where the load method is not firing on IE9.0 for 4 divs (class=mydiv) with images inside, while it works on other browsers I've tested. I'm unsure if this issue persists in other versions of Internet Explorer. $.noConflict() ...

jqueryinternet-explorerinternet-explorer-9

Unexpected errors causing havoc in my internet browser

I am facing difficulties uploading large files (~ 2 GB) on my server. To prevent crashes caused by huge files, I have removed the bodyParser from Express. However, the crash error occurs randomly, making it challenging to pinpoint the exact cause. The cod ...

javascriptnode.jsuploadexpressformidable

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

javascriptjqueryhtmlcss

Counting the number of PHP inputs in a field

Hello, I am using a PHP script from Steve Dawson's website. To display the output on my HTML page, I am utilizing this AJAX script: <script> $.ajax({ type:'GET', url:'http://www.solariserat.se/count.php', data: ...

javascriptphpjqueryhtmlajax

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

htmlangular

What is the method to combine multiple style values in vue.js?

Is there a way to create a div with a box shadow where the values can be changed using a slider? I am having trouble using more than one value stored in a data variable. Any suggestions on how to achieve this? <div :style="{ borderRadius: x_axis y_ ...

javascriptcssvue.js

What is the proper way to define an element's style property in strict mode?

Assuming: const body = document.getElementsByTagName('body')[0]; const iframe = document.createElement('iframe'); iframe.src = protocol + settings.scriptUrl + a; iframe.height = 1; iframe.width = 1; iframe.scrolling = 'no'; ...

javascriptcss

Unit test produced an unforeseen outcome when executing the function with the setTimeout() method

When manually testing this code in the browser's console, it performs as expected. The correct number of points is displayed with a one-second delay in the console. const defer = (func, ms) => { return function() { setTimeout(() => func.ca ...

javascriptunit-testingasync-awaitjestjs

"Experiencing a callstack overflow due to multiple carousels on one page using Jquery or Vanilla

Currently, I am working on implementing a Jquery infinite autoplay multiple carousel. What I have done is created two separate carousel blocks on the same page within the body section. <div class="rotating_block"> <div class="bl ...

javascripthtmljquerycsscarousel

Steps for inserting a JSON Array into a database

I have a dropdown menu that displays different options based on the selection from another dropdown. The data for each dropdown is fetched from the database and I need to insert the selected values into a new table in the database. All the necessary code ...

javascriptphpjquerymysqljson

Align dropdown navigation menu/sorting dropdown in the same position as the button

Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...

javascriptjqueryhtmlcss

Is there a way to center a div vertically without specifying the screen height?

Trying to create a slider that aligns both horizontally and vertically can be a tricky task. To achieve this alignment, I have implemented the use of display: flex; within the following code: body { display: flex; flex-direction: column; justify-c ...

htmlcssflexboxpositioning

Quickly view products in Opencart will automatically close after adding them to the cart and redirecting the

I've integrated the product quickview feature into my OpenCart theme, which opens a product in a popup. However, when I add a product to the cart from the popup, it doesn't update on the main page until I refresh. I'm looking for a way to re ...

javascriptphpjqueryajaxopencart

The presence of 'touched' within Angular validation is causing a delay in method execution

Upon utilizing this validation method, it became apparent: <label>Password</label> <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': f.password.touc ...

javascriptangular

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

In my Django project, I am utilizing pure CSS and Bootstrap. Everything appears as expected when I test it on my local machine. However, once deployed, the appearance changes. The font looks different from how it did before deployment: After deploying to ...

javascripthtmlcssdjangoyui-pure-css

Struggling to populate a dropdown list with HTML, PHP, and MySQL

Here is the code snippet for creating a payment form: Everything seems to be working fine, but there is an issue with the supplier-ID dropdown. The dropdown is being created but it is not fetching data from the mysql table and no errors are being display ...

phphtmlmysqlcss