We Keep Coding

How do I have a function find two elements? [duplicate]

This question already has answers here:
Can you do an 'AND' on a jQuery selector to target multiple buttons?
(3 answers)
Closed 4 months ago.
I'm a beginner with JavaScript so I'm sure this will be an elementary question.
With this function below, I want it to find the two elements and add them to a header element. Right now, the only thing that is working is the element, the link with the rel:author tag. I'm sure this is probably a syntax thing.
(function($) {
$(document).ready(function() {
$(".single .single-post-module").each(function() {
$(this).find('a[rel="author"]', 'span[class="updated"]').clone().appendTo($(this).find('.post-header h1'));
// ^^^
});
});
})(jQuery)
Edit: I'm using Divi on wordpress and the site is in maintenance mode. That's why didn't show the HTML or give a link.

This could be done with pure Javscript querySelectorAll with an CSS selector that will find both elements.
To clone the element, use cloneNode(true) where the first parameter indicates to clone 'deep'
const header = document.querySelector('.post-header > h1');
const elements = document.querySelectorAll('.single, .single-post-module');
Array.from(elements).forEach(e => header.append(e.cloneNode(true)));
<div class='single'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='single-post-module'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='post-header'>
<h1></h1>
</div>

Remove the contents under classname using Javascript [duplicate]

This question already has answers here:
Remove all child elements of a DOM node in JavaScript
(37 answers)
How do I clear the content of a div using JavaScript? [closed]
(2 answers)
Closed 5 years ago.
I want to remove the everything under the classname: social-share using JavaScript
HTML: This is what it looks like when I grab the code from chrome inspector.
<div class="social-share">
[shareaholic app="share_buttons" id="26444890"]
</div>
HTML: This is what exactly looks like inside the chrome inspector
<div class="social-share">
"
[shareaholic app="share_buttons" id="26444890"]
" == $0
</div>

You can use innerHTML to clear the contents of the element after it has been selected:
// select element with class 'social-share:
var social_share = document.querySelector('.social-share');
// Set it's contents to an empty string
social_share.innerHTML = '';

$('.social-share').empty();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social-share"> content
<div>content</div>
</div>
Jquery empty() might be help you. It will remove every thing inside social-share class

Show popup after removing div [duplicate]

This question already has answers here:
jQuery remove() callback?
(3 answers)
jQuery callback within the remove() function
(2 answers)
Closed 5 years ago.
I would like to remove div first, then show my popup. But while showing the alert I am able to see the div.
Once closing the popup the div will be removed.
$("#btnRemoveDiv").on("click",function(){$("#divRemove").remove();
alert("Removed");});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="divRemove">Remove this div first then show the popup. Dont show this while the popup is opened!</div>
<input type="button" id="btnRemoveDiv" value="Remove">
#quirimmo Please see this:

Use when to manage it as a promise and it should work:
$("#btnRemoveDiv").on("click",function(){
$.when($('#divRemove').remove()).then(function() {alert('removed');});
});
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div id="divRemove">Remove this div first then show the popup. Dont show this while the popup is opened!</div>
<input type="button" id="btnRemoveDiv" value="Remove">
JSfiddle:
https://jsfiddle.net/91x9ta3n/12/

Use a timeout so the alert and the remove doesn't execute at the same time.
$("#btnRemoveDiv").on("click", function () {
$("#divRemove").remove();
setTimeout(function () {
alert("Removed");
}, 500);
});
jsfiddle: https://jsfiddle.net/91x9ta3n/7/

jQuery selectors for dynamically loaded HTML [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
jQuery does not seem to be able to select a loaded HTML element. Here is my HTML:
<div class="class name" style="display: none;">
<div id="submenuID" class="submenuID" />
<script>
loadHtmlUsingJavascript('parameter1', 'parameter2');
</script>
</div>
The loaded HTML is a list of links. This is my JavaScript:
$("#submenuID li").addClass("active");
But it would not add the class. After some snooping around. I learn to use
$("#submenuID li").live('click', function() {
$("#submenuID li").addClass("active");
});
However, it does not work until I click on the link a second time.

You have to do the following:
$("#submenuID").on('click', 'li', function() {
$(this).addClass("active");
});
First, the jQuery .live function is deprecated since jQuery 1.7 (http://api.jquery.com/live/)
Also, you should be listening for li methods inside the #subMenuID element.

Removing the div child in jquery [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Replace Div with another Div
<div id='test'>
<span></span>
<p></p>
<button></button>
<h1></h1>
</div>
My question is , how we can remove the button element and insert someother on the same position in jquery?

Use this:
$('#test button').replaceWith('<span>new</span>')

$('#test button:first').replaceWith('<span>new</span>')

you can usereplaceWith() method:
$('#test button').replaceWith('<p>another element</p>')

You can use the .replaceWith() method to accomplish this. For more.

Solution
$('#test').find('button').replaceWith('<input type="text"/>');
alert($('#test').html());