Develop Reference

Why when I create several html tags with javascript then I can not delete it with the same javascript?

When I create a form with the write () command, then I want to delete it, but I can't. What is the cause of this problem?
In order to do this correctly, what command should I use or what should I change in my code?
var btn = document.querySelector('#btn');
var btn_alert = document.querySelector('#btn-alert');
var content = document.querySelector('.popup-container');
var div1 = document.getElementById('div1');
function message(message, btn) {
document.write('<div id="div1"><div id="content" class="popup-container"><div class="box-item"><div class="icon-success"><span class="span1"></span> <span class="span2"></span><div class="ring"></div></div><h2 class="alert-title">Good job!</h2><div class="alert-content">' + message + '</div><div class="actions-btn"><button onclick="ok()" class="btn-alert" id="btn-alert">' + btn + '</button></div></div></div></div>')
}
function ok() {
div1.removeChild(content);
}
<button class="btn-alert" id="btn">OK</button>
<!-- <div id="content" class="popup-container dis-active">
<div class="box-item">
<div class="icon-success">
<span class="span1"></span>
<span class="span2"></span>
<div class="ring"></div>
</div>
<h2 class="alert-title">Good job!</h2>
<div class="alert-content">is ok.</div>
<div class="actions-btn">
<button class="btn-alert" id="btn-alert">OK</button>
</div>
</div>
</div> -->
<script src="script.js"></script>
<script>
message("خوش اومدی!", "کلیک کن");
</script>

document.write is really outdated. In your script you write the elements to the document after you're trying to retrieve them. That won't work.
Here is an example snippet using insertAdjacentHTML to create a message element with a button to remove it.
It is generally not a good idea to use inline event handlers. The snippet uses event delegation to handle button clicks.
It may be wise to first learn more about html document manipulation or javascript.
document.addEventListener(`click`, handle);
const create = () => message(`خوش اومدی!`,`کلیک کن`);
create();
function handle(evt) {
if (evt.target.id === `btn-alert`) {
document.getElementById('div1').remove();
}
if (evt.target.id === `recreate`) {
create();
}
}
function message(message, btnTxt) {
document.body.insertAdjacentHTML(`beforeEnd`, `
<div id="div1">
<div id="content" class="popup-container">
<div class="box-item">
<div class="icon-success">
<span class="span1"></span>
<span class="span2"></span>
<div class="ring"></div>
</div>
<h2 class="alert-title">Good job!</h2>
<div class="alert-content">${message}</div>
<div class="actions-btn">
<button class="btn-alert" id="btn-alert">${btnTxt}</button>
</div>
</div>
</div>
</div>`);
}
<button id="recreate">(re)create message</button>

How can I get parents' parents' child's value using jQuery?

I'm a student who is studying Python alone these days.
Below is part of my HTML page's JavaScript code.
let temp_html_0 = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="reason-comment">REASON : ${comment}</p>
</div>
<div class="button-result">
<button type="button" class="btn btn-success" onclick="confirm()">Confirm</button>
<button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
</div>
<br/>
</div>
`
javascript function :
function confirm(){
alert('confirmed👌')
let test = $(this).parent().parent().find(".card-img-top").attr("src");
alert(test)
window.location.reload()
}
What I want to do is:
When user clicks btn-success button,
call confirm() function,
and get img src (${image} in my code)
to call AJAX.
I tried code above but it didn't work.
How can I get img src value?

From your comment I see that temp_html_0 will be repeated, then why not just use a subclass with a unique identifier like the iteration index for example and add it to your image class as the following
<img class="card-img-top top-img-{index}">
And then you can pass that index to your function and get that element by using your logic.

You can pass the button reference in HTML event binding confirm(this) reject(this), then you may access the parent and image src in both of the methods as shown in be below snippet.
function confirm(btn) {
var $btn = $(btn);
var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
console.log(`confirmed - ${imgSrc}`);
}
function reject(btn) {
var $btn = $(btn);
var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
console.log(`rejected - ${imgSrc}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<img class="card-img-top" src="${image}" alt=" Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="reason-comment">REASON : ${comment}</p>
</div>
<div class="button-result">
<button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
<button type="button" class="btn btn-danger" onclick="reject(this)">Reject</button>
</div>
<br />
</div>

The core of the problem is that you use the onclick attribute. The value of it is confirm(), so when activated it will call the function but not set the context in any way. So this will be window (if you're not in strict mode).
A quick fix would be to modify the function definition to function confirm(el){ and the HTML to onclick="confirm(this)" in order to have access to the element that's clicked as a parameter. This leads to this code:
function confirm(el){
console.log('confirmed👌')
let test = $(el).parent().parent().find(".card-img-top").attr("src");
console.log(test)
//window.location.reload()
}
//////////////////////////////
const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";
let temp_html_0 = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="reason-comment">REASON : ${comment}</p>
</div>
<div class="button-result">
<button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
<button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
</div>
<br/>
</div>
`
$("#main").append(temp_html_0);
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>
However, a better technique is to use event binding on dynamically created elements using event delegation. It will execute the function with the correct context and further allows you to still have a single event handler but you do not mix the HTML with logic that JavaScript would use.:
function confirm(){
console.log('confirmed👌')
let test = $(this).parent().parent().find(".card-img-top").attr("src");
console.log(test)
//window.location.reload()
}
$("#main") // --> common ancestor for all your dynamic elements
.on("click", ".btn-success", confirm);
// ^^^^^^^^^^^^^^ ^^^^^^^ --> event handler to execute
// ↳ element to monitor for clicks
function reject(){
console.log('rejected👎');
}
$("#main").on("click", ".btn-danger", reject);
//////////////////////////////
const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";
let temp_html_0 = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="reason-comment">REASON : ${comment}</p>
</div>
<div class="button-result">
<button type="button" class="btn btn-success">Confirm</button>
<button type="button" class="btn btn-danger">Reject</button>
</div>
<br/>
</div>
`
$("#main").append(temp_html_0);
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>

You can directly pass image src as parameter into confirm function call like this:
<button type="button" class="btn btn-success" onnclick="confirm(${image})">Confirm</button>
and you can get this parameter value inside confirm function.

html file wont read onclick attribute as a string

I am really new to coding and I am following this video tutorial to make a website that displays someone's age in days depending on the prompt input. I am trying to link an onclick attribut to an HTML button that will link to my js function. the problem is that the onclick attribute will not read the js function as a string; thus, not functioning properly. I have tried to google the solution for almost an hour now, but I have not found anything that works. Please help. EDIT: I was told to add parentheses and it still did not work.
html code:
<div class="container1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flexboxcontainer1">
<div>
<button class="btn btn-primary" onclick="ageindays()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flexboxcontainer1">
<div id="flexboxresult"></div>
</div>
</div>
<script src="project1.js"></script>
</body>
</html>
js code:
function ageindays() {
var birthyear = prompt("What year were you born.. Good friend?");
}

You need to call it with (). So, it will be onclick="ageindays()"
function ageindays() {
var birthyear = prompt("What year were you born.. Good friend?");
}
<div class="container1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flexboxcontainer1">
<div>
<button class="btn btn-primary" onclick="ageindays()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flexboxcontainer1">
<div id="flexboxresult"></div>
</div>
</div>
<script src="project1.js"></script>

JQuery toggle/html: changing the content in div

I'm currently working on a blog layout with a main div and a side bar with links. I want each link to change the content of the main div.
I tried using toggle and html.
Here's the main class and the content of each link:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
And the side bar:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
So when I click on the button "works" I want the content of that div into the main div.
Here's the snippet of the JQuery (that doesn't work):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
Note: on my CSS I have the display: none as well.

I think it is the easy way to show and hide divs, by assigning a relation to the buttons using HTML5's data attribute (here their ids are used in data-target attribute). See the snippet below...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>

dropzone.js programmatically doesn't work

I am trying create drop zones programmatically, but it doesn't work.
HTML Code:
<div class="content-wrap">
<div class="row">
<script type="text/javascript">
$(function() {
$("div#myDropZone").dropzone({
url : "/file-upload"
});
});
</script>
<div class="col-sm-12">
<div class="nest" id="DropZoneClose">
<div class="title-alt">
<h6>DropZone</h6>
</div>
<div class="body-nest" id="DropZone">
<div id="myDropZone" >
</div>
<button style="margin-top: 10px;" class="btn btn-info"
id="submit-all">Submit all files</button>
</div>
</div>
</div>
</div>
</div>
The drop zone in <div id="myDropZone"> not appers!
best regards :)

You need to give your #myDropZone div some width and height so that it takes up space. Heres a jsfiddle.
Alternatively, you can add the dropzone class to your div to get the default styling that you see in the demos. Heres the jsfiddle for that.

Add class dropzone to the div element which holds your drop zone.
Hope that you have added the dropzone stylesheet to your page.