We Keep Coding

How do you append an element by an ID obtained with this.id to another element?

I have several pictures in the same class, and when the class is clicked I get the ID of the picture using this.id. I want to take that ID and use it to move the picture that has been clicked. I am trying to append it to the span with the ID "yours."
$(".characters img").on("click",function(){
console.log(this.id);
$(this.id).prependTo("#yours");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "characters">
<img src="assets/images/luke.jpg" id="luke">
<img src="assets/images/rey.jpg" id="rey">
<img src="assets/images/kylo.jpg" id="kylo">
<img src="assets/images/snoke.jpg"id="snoke">
</div>
<div class = "text">
<h1> Your Character </h1>
<span id="yours"> </span>
<h1>Enemies Available to Attack</h1>
<span id="enemies"></span>
<h1> Defender</h1>
<span id="defender"></span>
</div>

Instantiate a new jQuery object with the image (this), and not this.id:
Change:
$(this.id).prependTo("#yours");
To:
$(this).prependTo("#yours");

While clicking on an img, target #yours element, empty it ( if desired ), then clone the clicked img and pass it to the html method since it accepts a jQuery object.
$(".characters img").on("click",function(){
// Empty "yours" and add the cloned clicked image
$("#yours").empty().html($(this).clone());
});

Find Elements in Javascript

I need to find a div with class "kinder" that have a element "a". I need to get and alert the href attribute from a.
UPDATED EXEMPLE: For example. If I had:
<div class="controls-wrapper">
<div class="title" role="contentinfo">
<header>
<div class="kinder" aria-hidden="true">
<a tabindex="-1" href="https://google.com" target="_blank">
<img src="https://imageUrl/120x120.jpg" alt="" width="60" height="60">
</a>
</div>
I need to alert "http://google.com"
I have tried the following code:
var aUserVideo = document.getElementsByClassName('kinder')
aUserVideoHref = aUserVideo.attribute("a");
aUserVideoHref = aUserVideoHref.attribute("href");
alert(aUserVideoHref);

Problems:
The javascript method getElementsByClassName() return array-like object of all child elements which have all of the given class names, so you've to target the object you want to use by index (example to get the first use aUserVideo[0]).
If you want to get an attribute you should use getAttribute() instead of attribute.
Suggested Solution :
You could simply get the href using querySelector with .href like :
document.querySelector(".kinder a").href
Hope this helps.
window.addEventListener("DOMContentLoaded", function() {
console.log(document.querySelector(".kinder a").href);
}, false);
<div class="kinder" aria-hidden="true"> <a tabindex="-1" href="http://google.com" target="_blank"> <img src="https://imageUrl/120x120.jpg" alt="" width="60" height="60"> </a> </div>

You have your post tagged with jQuery. Here's the jQuery way to do it:
alert( $('.kinder a').prop('href') );
Or vanilla JavaScript:
alert ( document.querySelectorAll('.kinder a')[0].href );

You can get it with Jquery using the attr function like this:
Jquery:
alert($('.kinder a').attr('href'));
Regards!

How to get value from dynamically created hidden field in JQuery?

In my use case, I am trying to get value from dynamically generated hidden field in JQuery. When I click the button for that iteration I should get the value for the hidden field belongs to that iteration. But I am not able to get it. It is giving the value as 'undefined'
HTML:
<div class="comment-list-new" style= "max-height: 660px !important;overflow-y: scroll;">
<h5>Discussion Board</h5>
<ol>
{{ if .ViewData.Questions }}
{{ range .ViewData.Questions }}
<li>
<p id="question_id" class="question_id_val" hidden>{{.QuestionId}}</p>
<div class="q-comment">
<div class="qanda questiondiv" id="questionarea" name="questionarea">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">3</span>
<a class="downvote"></a>
</div>
<div >
<div class="qanda-info">
<h6><p id="quest_title">{{.QuestionTitle}}</p></h6>
</div>
<p id="quest_text">{{.QuestionText}}</p>
</div>
</div >
<div class="qanda-info">
<div class="user-info">
<img src="/resources/img/team-small-2.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
<a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
</div>
</div>
</div>
</li><!--end of individual question-->
{{ end }}
{{ end }}
</ol>
</div><!--end of comments list-->
JS:
$('.questiondiv').on('click', '.submitanswerbutton', function() {
console.log("In submit button");
var question_id = $(this).closest('.question_id_val').val();
var answer_text = $('.answertext_val').val();
console.log(question_id);
console.log(answer_text);
$.getJSON("/submitanswer?question_id="+question_id+"&answer="+answer_text, function(data) {
console.log("answer Response"+data);
newQuestion = "<li><div class='q-comment'><div class='qanda' id='questionarea' name='questionarea'><div><div id='topic' class='upvote pull-left'><a class='upvote'></a><span class='count'>0</span><a class='downvote'></a></div><div ><div class='qanda-info'><h6><p id='quest_title'>"+title+"</p></h6></div><p id='quest_text'>"+desc+"</p></div></div ><div class='qanda-info'><div class='user-info'><img src='/resources/img/team-small-2.png' /></div><h6>Chip Mayer</h6><span class='date alt-font sub'>September 17 2014</span><a id='answertext' name ='answertext' type='submit' class='link-text'>Answer</a></div></div></div></li>";
$('ol').append(newQuestion);
});
});
In the above code I am trying to get the value for the hidden field question_id_val.
Could anyone help me with this?

Use closest() to get a reference to the outer container (li) and then use find() method to get the hidden field.
var question_id = $(this).closest('li').find('.question_id_val').val();
val() method works for usually input form fields(textbox,hidden fields etc..) .So you need to make sure your element is a valid form field in your page.
<input type="hidden" id="question_id" class="question_id_val" />
Or if you want to keep your p tag as it is, Use the html() or text() method to get the content of the p tag.
var question_id = $(this).closest('li').find('.question_id_val').text();
Remember, these method returns the text/html of all child content as well. So make sure to use it wisely.

val() should be used primarily in select, textarea and input elements.
For getting the inner text use html() or text()
var question_id = $(this).closest('.question_id_val').html();
or
var question_id = $(this).closest('.question_id_val').text();

If you know a css selector id or class I don't see problem why you can't do something like this:
var question_id = $('#question_id').text();
Or
var question_id = $('.question_id_val').text();

Attempting to replace an audio src value on click?

I'm trying to program a playlist for a site I'm presently working on, and I'm having some issues presently. I've written the script so far and it replaces the default song with a second song, but does not revert back on click.. any suggestions?
The HTML...
<audio id="player" src="../audio/small-skeletal.mp3" type="audio/mp3" controls autoplay></audio>
<div id="audio_list" style="margin-top: 100px;">
<div id="track">
<h2 class="change-song" data-track="http://www.birp.fm/music/playlists/2014/january-2014/027%20-%20Phantogram%20-%20Fall%20In%20Love.mp3">Switch to second song</h2>
<h2 id="bb" class="change-song" data-track="http://www.logicwebmedia.com/dev/ecb/new-dev/audio/small-skeletal.mp3">Change it back!!</h2>
</div>
$('.change-song').click(function(){
var song = $('.change-song').data('track');
$('#player').attr('src', song).attr('autoload', 'auto').attr('autoplay');
});
The script only ever returns the first song as the value, and never the second.. how do I fix this?

Change your click function to:
$('.change-song').click(function(){
var song = $( this ).data('track');
$('#player').attr('src', song).attr('autoload','auto').attr('autoplay');
});
this is a reference to the element that was clicked.

You need to use this as a reference to the clicked .change-song element in the click handler. Your current code is selecting both elements at once and when you retrieve the track data attribute it only gets it from the first element in the matched set.
$('.change-song').click(function(){
var song = $(this).data('track');
$('#player').attr('src', song).attr('autoload','auto');
});

Change your $('.change-song').data('track'); to $(this).data('track'); which will give you correct scope. Sorry for changing song files in the snippet.
$('.change-song').click(function() {
var song = $(this).data('track');
$('#player').attr('src', song).attr('autoload', 'auto').attr('autoplay');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonmit2ani">
<audio id="player" src="audio/acdc.ogg" controls autoplay></audio>
<div id="audio_list" style="margin-top: 100px;">
<div id="track">
<h2 id="aa" class="change-song" data-track="audio/acdc.ogg">Switch to second song</h2>
<h2 id="bb" class="change-song" data-track="audio/radiohead.ogg">Change it back!!</h2>
</div>
</div>
</div>

how to hide/remove all text in-between two elements?

lets say i have this lump of HTML:
<div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>
What i want to do using jQuery/JavaScript is hide/remove all text and elements between <span class="title"> and <div class="image">.
I've looked all over and found pretty much nothing. Any ideas on how i could do this?

How about something like this? http://jsfiddle.net/ZW8q2/1
var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);

You could try:
var str = $('.container .title').text() + $('.container .image').html();
$('.container').html(str);
JS Fiddle.

Try this:
Place a tag around what you want to hide, give div an ID name. So in the end your will look like:
<div id = "hideMe" style ="display:block">...Your Content...</div>
Use this javascript:
function hide()
{
document.getElementById('hideMe').style.display = "none";
return;
}
Have the Javascript function called whenever you want to hide the stuff between the div from a button (or other control) like this:
<input type= "submit" onclick ="hide()">