We Keep Coding

Jquery delete elements that were created using .after

I have a table in my html file which has the column header hard-coded:
<table id="debugger-table">
<tr>
<th>Attribute</th>
<th>Computed</th>
<th>Correct</th>
</tr>
</table>
Which I populate with values for row 2 onwards in a .js file using jquery:
tableString = '';
DEBUG_DATA.forEach(function(debug_line){
tableString += '<tr><td>' + debug_line['attribute'] + '</td><td>' + debug_line['computed'] + '</td><td>' + debug_line['correct'] + '</td>'
});
$('#debugger-table tr:last').after(tableString);
When the user performs a certain action I want to update the values. My question is how do I remove the text I've added, so that I can replace it with new text, instead of just appending the new values after the old ones.
I figure I could destroy the whole table and then create a new one with the column headers. Seems overkill though. Is there a way to refer back to the text added with .after, and delete it? thanks.

Store the addition into a jQuery object:
const rows = $(tableString);
('#debugger-table').append(rows); // Tip: this is better than
// $('#debugger-table tr:last').after(rows);
Then later remove it when needed:
rows.remove();

Placing generated JavaScript URL into `<a href="{{Text here}}">`

So, I have an external JavaScript that generates 4 numbers and puts them between 2 parts of text, like this
document.getElementById("gen3").textContent = "https://www.google.com/search?q=Lego+set:+" + first + fnum + snum + tnum + "&num=30&safe=off&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj08YDU_MjSAhXLLMAKHSp4CxQQ_AUICCgB&biw=1366&bih=669";
<p>
<input id="gen-btn" type="button" value="Generate" onclick="postmessage();" />
</p>
<div id="gen3"></div>
It generates properly and selecting it and opening it in a new tab works perfectly, but I'd like to make it easier by placing it directly into an href.

You can change your div into an a (anchor tag) in your HTML and use its href property in JavaScript to set the URL destination used when you click it. You can also choose to set its textContent to the same value, which makes it clearer to people using the tool where exactly they are going when they click the link.
gen3.href = gen3.textContent = "https://www.google.com/search?q=Lego+set:+" + first + fnum + snum + tnum + "&num=30&safe=off&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj08YDU_MjSAhXLLMAKHSp4CxQQ_AUICCgB&biw=1366&bih=669"
Demo Snippet
var gen3 = document.getElementById("gen3")
function postmessage() {
// Pretending these are "random" values, and assuming you have the code for them already
var first = 1,
fnum = 2,
snum = 3,
tnum = 4
// Later...
gen3.href = gen3.textContent = "https://www.google.com/search?q=Lego+set:+" + first + fnum + snum + tnum + "&num=30&safe=off&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj08YDU_MjSAhXLLMAKHSp4CxQQ_AUICCgB&biw=1366&bih=669"
}
<p>
<input id="gen-btn" type="button" value="Generate" onclick="postmessage();" />
</p>
<p>
<a id="gen3"></a>
</p>

You can create an anchor tag inside the div
Then you can do like this
JS
document.getElementById("linkText").setAttribute('href','www.google.com')
HTML
<div id="gen3">
Click Me
</div>
DEMO

variable in onclick function of dynamically created button

Hy,
Basically, I have a number of dynamically generated list items with a button in them. When I prepend the list item to the ul list, I have access to a variable that I want to pass when I click the button in the list items. But when I add the variable in the line of code shown below, it gives me a Uncaught ReferenceError: challenger is not defined error. How can I pass these variable along?
JAVASCRIPT:
window.GLOBAL_socket.on('challenged', function(data) {
console.log("You have been challenged by the player " + data.challenger);
var challenged = getUrlVars()['user'];
var challenger = data.challenger;
$("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>" + data.challenger +
"</p><input type='button' value='ACCEPT' id='challenge_accept' onclick='acceptChallenge(challenger)'></input><input type='button' value='DECLINE' " +
"id='challenge_decline' onclick='declineChallenge(this)'></div></li>");
});
The onclick method is found on line 6.
Thanks for your responses,
Zeno

The reason why challenger is not defined is because it's a local variable and is not accessible globally when you actually trigger the function with a click.
So instead of using the variable, just place it's actual value in the onclick.
Change your code to:
$("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>" + data.challenger +
"</p><input type='button' value='ACCEPT' id='challenge_accept' onclick='acceptChallenge(\""+challenger+"\")'></input><input type='button' value='DECLINE' " +
"id='challenge_decline' onclick='declineChallenge(this)'></div></li>");

Change your code as I mentioned in comments.
var challenged = [];
var challenger = [];
var counter = 0;
window.GLOBAL_socket.on('challenged', function(data) {
console.log("You have been challenged by the player " + data.challenger);
counter++;
challenged[counter] = getUrlVars()['user'];
challenger[counter] = data.challenger;
$("#challengesList").prepend("<li><div id='newChallenge'><p id='challenge_header'>You have been challenged by: </p><p id='challenge_challenger'>"
+ data.challenger
+ "</p><input type='button' value='ACCEPT' id='challenge_accept'"
// change of code --> passing value directly into the function
+ " onclick='acceptChallenge(challenger["+counter+"]
+")'></input><input type='button' value='DECLINE' "
+ "id='challenge_decline' onclick='declineChallenge(this)'></div></li>");
});
I just modified code, hope it works for you. Let me know

Render the Xml file having controls layout into HTML5 page

I have the following xml file with the controls information to render into HTML page.
The contents are like:
<control type="panel">
<panel id="p1">
<button id="b1">
<value>TEST</value>
</button>
<textbox id="t1">
<text>HELLO</text>
</textbox>
</panel>
<control>
This has to rendered on the fly into a div with a panel containing one button and one textbox.The contents of xml are known only at runtime.It can be anything like only a button or a dropdown list information.How would one go about approaching this problem.A generic algorithm(probably using jquery) would be really helpful.

For something generic, your XML would need to be generic or conformant to a convention along the lines of "XML to HTML form convention". I know of no such thing. :)
It seems easy enough to handle. Here's an example of how I'm handling your XML example.
$(function() {
// Data setup (I assume you'd be getting this from AJAX)
var xml = '<control type="panel">' +
'<panel id="p1">' +
'<button id="b1">' +
'<value>TEST</value>' +
'</button>' +
'<textbox id="t1">' +
'<text>HELLO</text>' +
'</textbox>' +
'</panel>' +
'</control>';
// Convert to jQuery XML object
var xml = $($.parseXML(xml));
// Set parent
var parent = $('#control');
// Handle elements
xml.find('panel').children().each(function() {
var tag = $(this)[0].tagName;
switch (tag) {
case 'button':
parent.append('<button id="' +
$(this).attr('id') + '">' +
$(this).find('value').text() +
'</button>');
break;
case 'textbox':
parent.append('<input type="text" id="' +
$(this).attr('id') +
'" value="' +
$(this).find('text').text() +
'" />');
break;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="control"></div>
Of course, you could modify this as necessary, add new element handling, change the way it's added to the parent, etc. etc. I hope it helps.

Set the content of Bootstrap tooltip via Javascript

I have included tooltips in my table's cells. Here is how I did it:
<td data-container="body" data-toggle="tooltip" data-html="true" data-original-title="10.5">10.5</td>
<script type="text/javascript">
$(document).ready(function(){
$(".table td").tooltip();
});
</script>
Until here, I don't have a problem. Now, I want to change the way it works. I have two dictionaries from numeric to text translations.
dic1 = {'0':'zero','1':'one','2':'two','3':'three'....}
dic2 = {'0.25':'a quarter','0.5':'half',....}
Numbers in the table are standards, so there isn't something that I don't have in dictionaries.
I want to change the title of the tooltips to this: one half (1.5) instead of 1.5. Splitting the number and take the text from one dictionary and the text from the other and then combine them.
Adding just the tooltip was easy, but now I think that I am stacked.

I haven't tested it, but something like this should work.
$('.table td').each(function () {
var title = $(this).attr('data-original-title').split('.');
$(this).attr('data-original-title', dic1[title[0]] + ' ' +
dic2['0.' + title[1]] + ' (' + title[0] + '.' + title[1] + ')');
});