Develop Reference

How to hide the parents of several elements with the same class?

I am trying to use .hide() from jQuery to hide some the parents of the li's that has the same class. No success so far. I see the other things like .addClass works fine, but .hide() is not working on this one?
Can someone give me a hand?
This is my code:
add()
function add() {
var element = document.getElementById("tasks");
var name = "acb"
$(element).append(
'<div class="d-flex mt-4">' +
'<span class="col-1">' +
'<li class="not-done" onclick="done(this)">' + name + '</li>' +
'</span>' +
'<span class="col-3">' +
'<button type="button" class="btn-edit">Edit</button>' +
'</span>' +
'</div>'
)
}
$("#show-done").click(function() {
$("li.not-done").parent().parent().hide();
// $("li.done").show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks">
<div class="d-flex mt-4">
<span class="col-1">
<li class="done" onclick="done(this)">xys</li>
</span>
<span class="col-3">
<button type="button" class="btn-edit">Edit</button>
</span>
</div>
</div>
<button id="show-done">show</button>

Adding an integer to string

I am trying to add an integer to the card id so that I can delete it when pressing the delete button. Any help?
var variable = '' +
'<div id="card+$num.toString(cnt);" class="card col-3" style="width: 18rem;" style="margin-right=3%; margin-right=3%">' +
' <img src="..." class="card-img-top" alt="..." id="image"+String(cnt)>' +
' <div class="card-body">' +
' <h5 class="card-title" id="title"+String(cnt) contentEditable="true"; >Card title</h5>' +
' <p class="card-text" id="desc"+String(cnt) contentEditable="true">Some quick example text to build on the card title and make up the' +
' bulk of the' +
' card\'s content.</p>' +
' <a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a>' +
' <a href="#" id="btn"+String(cnt) class="close"+String(cnt)>Delete</a>' +
' </div>' +
' </div>' +
'';
$(".create").click(function(){
document.getElementById("lastRow").innerHTML+=variable;
});
$(".close"+String(cnt)).click(function(){
console.log("Doulevw!");
document.getElementById("card"+String(cnt)).hidden=true;
});

There are a few concepts that you have to know when rendering dynamic elements with js.
you have a click listener for your .close button. This listener will never fire because this listener is relevant only for your initial DOM. But your closing button is rendered dynamically, which means that listener not relevant for your button.
Easily solving that by attaching onclick to the button, and creating a function. (example follows)
I inspected your code, you DON'T have to use id mechanism to delete/hide your card element (unless you need to fire POST request), you can use parentNode (example follows)
I made some simple changes to your code:
$(".create").click(function(){
let element = `
<div id="card" class="card col- 3" style="width:18rem;style="margin-right=3%; margin-right=3%"><img src="..." class="card-img-top" alt="..." id="image"+String(cnt)><div class="card-body"><h5 class="card-title" id="title" contentEditable="true">Card title</h5><p class="card-text" id="desc" contentEditable="true">Some quick example text to build on the card title and make up the bulk of the' card\'s content.</p><a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a><a href="#" class="close" onclick='deleteCard(this)'>Delete</a></div></div>`;
document.getElementById("lastRow").innerHTML+=element;
});
function deleteCard(delBtn){
delBtn.parentNode.parentNode.hidden = true
}
Notice for the function I added and the onclick that enables the hiding action.
Here is a codeped link for you to test by your self what I did.
Hope this was helpful, any other questions will be great :)

Pass Image ID - Array Index - to Modal from JSON

I have code that's dynamically creating a 3 column image grid from a mySQL database using a JSON array and jQuery .append. How would I pass the database $row ID (array index) of each image in the <div> created by the .append using an href to a modal? I'm calling/building the modal with an AJAX statement.
The line below is from the full $.getJSON statement further down. I believe I can pass the ID in the href but I'm not sure where or how?
// These lines generate the clickable grid images
<a href="equipment.php?id=' + data.Surfboards[row].Surfboard.id + '">
<img class="photog-headshot" src="images/' + data.Surfboards[row].Surfboard.imageName + '" alt="' + data.Surfboards[row].Surfboard.imageName + '">
JSON Parser - builds the image grid:
//gets the JSON from surfboards.php
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption><p>Board Name: '
+ data.Surfboards[row].Surfboard.boardName
+ '<br>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
Modal for Images:
<!-- Ajax Database Modal Start -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Surfboard Details</h4>
</div>
<div class="modal-body" id="surfboard_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Link to page with working table example and blank modal on image click: Nalu.live/equipment
Link to github repo
Please let me know if any additional information is needed.
Please consider that I'm still a student and very new to web development.
Thanks for any help.

I solved this with the help of a classmate. Working code is in the GitHub repo at the link below. Please note, the code that builds the image grid from JSON database data is posted below and can also be found in scripts/surfboard.js
I'm happy to answer questions (if I can) or walk anyone though the code if needed.
Nalu Github Repo
//// From Dylan W. on Discord - Replace in the surfboard.js
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="equip-content">' + '<div class="photog-group custom-modal clearfix" data-title="'+ data.Surfboards[row].Surfboard.boardName +'" data-image="images/'
+ data.Surfboards[row].Surfboard.imageName +'" data-description="'+
data.Surfboards[row].Surfboard.caDescription +'"><figure><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a data-target="#surfboardModal" data-toggle="modal"><div class="equip-content-overlay"></div><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption class="fadeIn-bottom"><h1>'
+ data.Surfboards[row].Surfboard.boardName + '</h1>'
+ '<hr>'
+ '<p>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
});

i want to associate links to respective article on dynamically created p element

here is my codepen link
my html code
<div id="main">
<h1>Wikipedia Viewer</h1>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-4 col-lg-7 col-lg-offset-4">
<div class="form-group">
<label class="sr-only" for="search">search</label>
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></form>
</div>
</div>
</div>
Surprise me!
</div>
<div id="search">
</search>
jquery code for making wikipedia api search call and then displaying title and overview.i want to associate links to respective article on dynamically created p element
$(document).ready(function() {
$("button").click(function() {
var article = $("input").val();
$.ajax({ //wikipedia api call
url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + article + "&format=json",
dataType: "jsonp",
success: function(data) {
for (var i = 0; i < data.query.search.length; i++) { //displaying titles and snippets accroding to search query. i want to associate link to each dynamically created p element.
var title = data.query.search[i].title;
var snippet = data.query.search[i].snippet;
$("#search").append("<p>" + title + "<br>" + snippet + "</p>");
}
$("#main").attr({
'style': 'display: none'
});
},
error: function() {
$("h1").html("oops");
}
});
});
});

Change your $("#search").append() as follows:
$("#search")
.append("<p><a href='https://en.wikipedia.org/wiki/" + title + "'>" + title + "</a>" +
"<br>" + snippet + "</p>"
);
Codepen

Clean way to create dom elements based on data from array?

I have an array full of objects that have the same keys, but different values. These objects need to be turned into divs with various sub elements. The following code works, but seems messy and hard to maintain.
pim.buildProducts = function(array) {
// for each item in the array
productHTML = '';
compareBoxHTML = '<div class="checkbox compare">' +
'<label data-placement="right" data-toggle="tooltip" title="Add to Compare"><span class="compare-text">Compare</span><input type="checkbox" value="compare"></label>' +
'</div>';
for(i = 0; i < array.length; i++) {
// build image
image = '<div class="image"><img src="' + array[i].image + '" /></div>';
// build description
desc = '<div class="desc"><h4>' + array[i].id + '</h4>' +
'<h5>' + array[i].description + '</h5>';
// build icons
icons = '<div class="pim-icons"><a class="cart" href="' + array[i].url + '"><span class="glyphicon glyphicon-shopping-cart"></span></a>';
if(array[i].catalog) {
icons += '<a class="file" href="' + array[i].catalog + '"><span class="glyphicon glyphicon-file"></span></a>';
}
icons += '</div>';
productHTML += '<div class="product">' + image + desc + icons + '</div>';
}
return productHTML;
};
Are there better ways of doing this, or other options that I could pursue?
Thanks!
Walter

As far as I know this is the cleanest way to do it.
First of all you should create all html like this;
<div hidden="hidden" id="mainDiv">
<div class="checkbox compare">
<label data-placement="right" data-toggle="tooltip" title="Add to Compare">
<span class="compare-text">Compare</span>
<input type="checkbox" value="compare">
</label>
</div>
<div class="image">
<a href="">
<img src="">
</a>
</div>
</div>
After that you should make the parent div hidden, and clone it to an object with .clone(). After that you just simply change values of the element like;
<script>
function fillData(array)
{
for(var i ; i<array.length;i++)
{
var element = $("#mainDiv").clone();
element.attr("hidden","");
element.find("img").attr("id",array[i].url);
$(document).append(element);
}
}
</script>
and append to where ever you want.

You could use document.createElement and the other DOM methods instead of writing HTML, but that may be even more verbose than using an HTML string.
Another option would be to use a template function like what lodash provides, which would make the HTML a lot cleaner.
The JS becomes:
pim.buildProducts = function(array) {
var tplHtml = document.getElementById('productsTpl').innerHTML;
var tpl = _.template(tplHtml);
return tpl({ products: array });
}
And you could put the template in your HTML file:
<script type="text/template" id="productsTpl">
<% products.forEach(function(item) { %>
<div class="product">
<div class="image">
<a href="<%= item.url %>">
<img src="<%= item.image %>" />
</a>
</div>
<div class="desc">
<h4><%= item.id %></h4>
<h5><%= item.description %></h5>
<div class="pim-icons">
<a class="cart" href="<%= item.url %>">
<span class="glyphicon glyphicon-shopping-cart"></span>
</a>
<% if (item.catalog) { %>
<a class="file" href="<%= item.catalog %>">
<span class="glyphicon glyphicon-file"></span>
</a>
<% } %>
</div>
</div>
</div>
<% }) %>
</script>

Take a look to document.createElement function and all others for DOM handling