We Keep Coding

javascript dynamically remove text

I have successfully created a button which adds text to the webpage however I do not know a viable way to remove text once this has been created. The js code I have is:
var addButtons = document.querySelectorAll('.add button');
function addText () {
var self = this;
var weekParent = self.parentNode.parentNode;
var textarea = self.parentNode.querySelector('textarea');
var value = textarea.value;
var item = document.createElement("p");
var text = document.createTextNode(value);
item.appendChild(text)
weekParent.appendChild(item);
}
function removeText() {
//document.getElementbyId(-).removeChild(-);
}
for (i = 0; i < addButtons.length; i++) {
var self = addButtons[i];
self.addEventListener("click", addText);
}
I have viewed various sources of help online including from this site however I simply cannot get any to work correctly. Thank you in advance.

Sure, it should be easy to locate the added <p> tag relative to the remove button that gets clicked.
function removeText() {
var weekParent = this.parentNode.parentNode;
var item = weekParent.querySelector("p");
weekParent.removeChild(item);
}
If there is more than 1 <p> tag inside the weekParent you will need a more specific querySelector.

Unable to get the updated id value of div eventhough it is adding in the HTML

enter image description hereI am trying to add multiple divs (containing 2 children h1 and canvas) to a div.
The added div ids are getting added in the HTML but i am not able to get the updated div ids through the api using the JavaScript.
Please find the below code in JavaScript.
Please find the attached screen shot which is showing the issue in detail in the Chrome Debugger
function addElement() {
var ni = document.getElementById('interview_div');
var userdiv = createUserDiv();
ni.appendChild(userdiv);
var canvas_id = document.getElementById('candidate_div').lastChild.getAttribute('id')
console.log(document.getElementById('candidate_div').lastChild.getAttribute('id'));
var canvas_temp = document.getElementById(canvas_id);
context = canvas_temp.getContext("2d");
drawTimeLine(20);
}
function createUserDiv(){
var div_user = document.createElement("div");
div_user.setAttribute('id','candidate_div');
var abcd = document.getElementById('uname').value;
var firstInput = createInput(abcd);
div_user.appendChild(firstInput);
var temp_canvas = document.createElement('canvas');
temp_canvas.setAttribute('id' , 'temp_canvas'+ abcd);
//width="1500" height="40"
temp_canvas.setAttribute('width','1500');
temp_canvas.setAttribute('height','40');
div_user.appendChild(temp_canvas);
return div_user;
}
function createInput(name){
var input = document.createElement('h1');
input.innerHTML = name;
//input.setAttribute('type', 'text');
//input.setAttribute('name', name+'[]');
return input;
}

Switch Content back and forth using Jquery

I have an app where when the user clicks on a table, assigned to btnAlternativeService, the content from this table swaps with another one.
The jQuery I have used involves creating two variables for each piece of content in the table, one to act as a JS selector and another to retain the original content. It looks like this:
// Switch between the two services
btnAlternativeService.on('click', function(){
// Set original recommended text variables
var serviceSubTextOriginal = $('.js-second-step .subtext-top').text();
var serviceProductTitleOriginal = $('.js-second-step .product-title').text();
var serviceMileageOriginal = $('.js-miles').text();
var serviceRecommendationOriginal = $('.js-second-step .full-rec').text();
// Set recommended text selector variables
var serviceSubText = $('.js-second-step .subtext-top');
var serviceProductTitle = $('.js-second-step .product-title');
var serviceMileage = $('.js-miles');
var serviceRecommendation = $('.js-second-step .full-rec');
// Set original alternative variables
var alternativeProductTitleOriginal = $('.js-alternative h3').text();
var alterativeMilageOriginal = $('.js-miles-alternative').text();
var alternativeSubTextOriginal = $('.js-alternative .alternative-subtext').text();
// Set alternative selector variables
var alternativeProductTitle = $('.js-alternative h3');
var alterativeMilage = $('.js-miles-alternative');
var alternativeSubText = $('.js-alternative .alternative-subtext');
// Swap everything around
serviceProductTitle.text(alternativeProductTitleOriginal);
serviceMileage.text(alterativeMilageOriginal);
serviceRecommendation.text(alternativeSubTextOriginal);
alternativeSubText.text(serviceRecommendationOriginal);
alternativeProductTitle.text(serviceProductTitleOriginal);
alterativeMilage.text(serviceMileageOriginal);
});
This seems very long winded - is there a better way for me to swap the content around?

You can select the elements by order and create 2 collections and use the indices for setting the text contents:
var $first = $('.js-second-step .subtext-top, ...');
var $second = $('.js-alternative h3, ...');
$first.text(function(index, thisText) {
// select the corresponding element from the second set
var $that = $second.eq( index ), thatText = $that.text();
$that.text( thisText );
return thatText;
});

Use a function:
function switchContent(selector_1, selector_2){
data_1 = $(selector_1).text()
data_2 = $(selector_1).text()
$(selector_1).text(data_2)
$(selector_2).text(data_1)
}
btnAlternativeService.on('click', function(){
switchContent('.js-alternative h3', '.js-second-step .product-title')
switchContent('.js-miles-alternative', '.js-miles')
switchContent('.js-alternative .alternative-subtext', '.js-second-step .full-rec')
});

Inserting CSS-linked HTML in HTML page code via JS

I do not have access to the HTML of the pages (they are program-built dynamically).
I do have access to the JS page it is linked to.
For example I can do somethin like this and it works:
window.onload=function(){
var output = document.getElementById('main_co');
var i=1;
var val="";
while(i<=1)
{ if(!document.getElementById('timedrpact01'+i))
{
var ele = document.createElement("div"); ele.setAttribute("id","timedrpact01"+i);
ele.setAttribute("class","inner");
ele.innerHTML=" Hi there!" ;
output.appendChild(ele);
I would like to use this basis insert a button that would allow to switch from one CSS set (there are several files invoked) to another _another path.
Many thanks

The external stylesheets are referenced using link, as in:
<link rel="stylesheet" href="http://example.com/path-to-css">
So, get hold of the appropriate link element using:
var css = document.getElementsByTagName("link")[0];
Here, we got hold of the first link available by specifying the [0] index.
Then, overwrite the href attribute to point it to the new path.
css.setAttribute("href", "http://example.com/path-to-css");

window.onload=function(){
var output = document.getElementById('main_co');
var i=1;
var val="";
//switch all the href's to another path
var switchStyleSheet = function() {
var links = document.getElementsByTagName("link");
for(var i=0; lkC = links.length; i < lkC; i++)
links[0].href = links[0].href.replace('path_to_file', '_path_to_file');
};
while(i<=1) //while is not required here, if i is 1
{
if(!document.getElementById('timedrpact01'+i)) {
var ele = document.createElement("div"); ele.setAttribute("id","timedrpact01"+i);
ele.setAttribute("class","inner");
ele.innerHTML=" Hi there!" ;
var button = document.createElement('button');
if(button.addEventListener) {
button.addEventListener('click', switchStyleSheet);
}
else {
button.attachEvent('click', switchStyleSheet);
}
output.appendChild(button);
output.appendChild(ele);
}
}
}

mainDiv.innerHTML = external file

I have a code.js file which contains the following:
DivDialogHTML = function(){
var mainDiv = document.createElement("div");
mainDiv.id = "optin_settings_dialog";
mainDiv.className = "OptinDialog";
mainDiv.innerHTML = "<div>Text</div>";
}
The code to load the popup (dont know if it's all code, but to get the idea):
DivDialogOverlayHTML = function(){
var mainDiv = document.createElement("div");
mainDiv.id = "optin_settings_overlay_dialog";
mainDiv.className = "OptinDialog";
return mainDiv;
}
renderOptinWindow = function(){
var pageHead = document.getElementsByTagName("head")[0];
var pageBody = document.getElementsByTagName("body")[0];
if( pageHead && pageBody ){
pageBody.appendChild( this.getDivDialogHTML() );
}
}
Instead of using the mainDiv.innerHTML = '<div>Text</div>' I'd like the mainDiv.innerHTML to open another file (Dialog.html).
How do I do that?

with Ajax. But why not using jQuery?
$('.selector').load(url);
In your case you have to insert jQuery first like this in your
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And than take your existing function and change it like this
DivDialogHTML = function(){
var $mainDiv = jQuery("div");
$mainDiv.attr('id', "optin_settings_dialog");
$mainDiv.addClass("OptinDialog");
/* $mainDiv.html("<div>Text</div>"); */
$mainDiv.load('Dialog.html');
}

Do you mean another window? If so, please take a look at window.open
window.open
After you create new window, you put its contents and display

if you don't want to use jQuery you can use an iframe
HTML
<iframe id="optin_settings_dialog"></iframe>
Javascript
document.getElementById("optin_settings_dialog").src="Dialog.html";