I need to get the value of the id attribute of an element.
javascript:
function checkPhoneZip() {
$.get(encodeURI("checkPhoneZip.aspx?mobilePhone=" + $("#mobilePhone").val() + "&postalCode=" + $("#postalCode").val()), function (data) {
$("#ajaxResults").html(data);
})
.done(function () {
var divs = $("#ajaxResults").find('div');
if (divs.length == 1) {
if ($("#ajaxResults").html() == "<div>dbEmpty<div>") {
$("#emailGetError").text("Cannot find an email address for the information entered");
}
else {
$("#user").val($("#ajaxResults").text())
$("#user").focus();
$("#emailRecovery").slideUp();
}
}
else {
var options = "";
for (i = 0; 1 < divs.length; i++) {
options += "<option value='" + $(divs[i]).attr("id") + "'>" + $(divs[i]).text() + "</option>";
}
$("#companies").html("<option selected>Select which business you are</option>" + options);
$("#companies").slideDown('fast');
}
})
.fail(function () { alert("Failed to contact Database. Please try again in a few seconds"); })
;
}
html
<%# Page Language="C#" AutoEventWireup="true" CodeFile="passwordReset.aspx.cs" Inherits="passwordReset" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<link href='https://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet' type='text/css'/>
<style type="text/css">
.link{text-decoration:underline;cursor:pointer}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="getCode" runat="server">
<div>Enter the email address associated with your account and a verification code will be texted to the mobile phone number you used to sign up.</div>
<div>
<input id="user" runat="server" type="email" />
<div id="userError"></div>
</div>
<div>
<button type="button" id="getCodeButton">GET CODE</button>
</div>
<div class="link" id="forgotEmail">Forgot email address?</div>
</div>
<div id="emailRecovery" style="display:none">
<div>Enter the mobile phone number you registered with</div>
<div><input type="tel" id="mobilePhone" /></div>
<div>Enter the postal code you registered with</div>
<div><input type="text" id="postalCode" /></div>
<div>
<button type="button" id="getEmailButton">GET EMAIL</button>
</div>
<div id="emailGetError"></div>
<div id="chooseCompany" style="display:none">
<select id="companies"></select>
</div>
</div>
<div id="code" runat="server" style="display:none">
<div>A text message with a verification code has been sent to <span id="msgPhone"></span>.<br />Enter the code you received below.</div>
<div><input type="text" id="codeInput" /></div>
<div id="codeInputError"></div>
<div>
<button type="button" id="sendCodeButton">SEND CODE</button>
</div>
</div>
<div id="changePass" style="display:none">
<div>Enter new password</div>
<div><input type="text" id="pwInput1" /></div>
<div id="pwInput1Error"></div>
<div>Enter new password again</div>
<div><input type="text" id="pwInput2" /></div>
<div id="pwInput2Error"></div>
<div>
<button type="button" id="changePassButton">UPDATE</button>
</div>
</div>
<div id ="ajaxResults" style="display:none"></div>
</form>
<script type="text/javascript" src="passwordReset.js"></script>
</body>
</html>
This part, $(divs[i]).attr("id"), comes back as undefined in the debugger. I'm trying to get the value of the id attribute of each div inside of #ajaxResults, and each div does have an id attribute. Something wrong with my syntax or understanding.
You're biggest problem is your for loop is checking 1 < divs.length instead of i < divs.length.
Use this instead:
for (i = 0; i < divs.length; i++) {
options += "<option value='" + $(divs[i]).attr("id") + "'>" + $(divs[i]).text() + "</option>";
}
Related
Today I am going to use JavaScript to do a validation of the registration page, but after an afternoon of verification, the function can be called. When the test pop-up window is added at the beginning of the function, the pop-up window pops up correctly, but the verification function in the function is always unresponsive. Ask for the forum's amnesty, where is the problem, thank you! ! !
I added a test popup statement to the script and it succeeded. But other functions don't respond.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
<script type="text/javascript">
window.alert("test");
function checkRegisterINfo(form) {
/*判断姓名格式是否正确*/
var RegisterNameCheck = document.getElementById("nameId").value;
if (RegisterNameCheck = "") {
window.alert("姓名不能为空！");
return false;
} else {
var rightName = /[\u4E00-\u9FA5]{2,16}/;
if (rigntName.test(RegisterNameCheck) == true) {} else {
window.alert("您输入的姓名不正确！");
return false;
}
}
/*判断密码是否规范*/
var RegisterPwdCheck = document.getElementById("pwdId").value;
var rightPwd = /^(\w){6,20}$/;
if (rightPwd.test(RegisterPwdCheck) == false) {
window.alert("密码只能输入6-20个字母、数字、下划线");
return false;
}
/*判断密保问题格式是否正确*/
var RegisterQuestionCheck = document.getElementById("questionId").value;
var rightQuestion = /[\u4E00-\u9FA5]{1,16}/;
if (!rightQuestion.test(RegisterQuestionCheck)) {
window.alert("密保问题支持1-16位汉字！");
return false;
}
/*判断密保答案格式是否正确*/
var RegisterAnswerCheck = document.getElementById("answerId").value;
var rightAnswer = /[\u4E00-\u9FA5]{1,50}/;
if (!rightAnswer.test(RegisterAnswerCheck)) {
window.alert("密保答案支持1-50位汉字！");
return false;
}
}
</script>
</head>
<body>
<div class="main">
<div class="title">
<span>用户注册</span>
</div>
<form name="registerForm" method="post" action="" onsubmit="return checkRegisterINfo(registerForm)">
<!--输入框-->
<div class="input-content">
<div>
<input type="text" autocomplete="off" id="nameId" placeholder="用户名" name="Registerusername" required/>
</div>
<div style="margin-top: 16px">
<input type="password" autocomplete="off" id="pwdId" placeholder="登录密码" name="Registerpassword" required maxlength="32" />
</div>
<div style="margin-top: 16px">
<input type="text" autocomplete="off" id="questionId" placeholder="密保问题" name="Registerquestion" required maxlength="32" />
</div>
<div style="margin-top: 16px">
<input type="text" autocomplete="off" id="answerId" placeholder="密保答案" name="Registeranswer" required maxlength="32" />
</div>
</div>
<!--登入按钮-->
<div style="margin-top: 105px">
<button type="submit" class="enter-btn">登录</button>
</div>
<div class="foor">
<div class="left"><span>忘记密码</span></div>
<div class="right"><span>用户登录</span></div>
</div>
</form>
</div>
</body>
</html>
We will have a set of records where the user will select what color they want that section to be. As you can see I'm duplicating script code so that I can change the colors of a div. This value will be stored in mysql and retrieved when the user access the page again. Is there a way to format this code so that it's not duplicated 500 times? Thank you for your help. --newbie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<style type="text/css">
#full {
background-color: #ffffff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".theme").change(function()
{var background = $("#color1").val();
$("#full").css("background-color", background);
});
$(".theme2").change(function()
{var background = $("#color2").val();
$("#full2").css("background-color", background);
});
$(".theme3").change(function()
{var background = $("#color3").val();
$("#full3").css("background-color", background);
});
});
});//]]>
</script>
<link rel="stylesheet" href="css/color_picker.css" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.colorpicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
$('#color1').colorPicker({showHexField: false});
$('#color2').colorPicker({showHexField: false});
});
</script>
</head>
<body>
<body >
<label for="color">Color :</label> </td><td>
<div id="full">
<form method="post" action="">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div id="full2" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme2"/>
</div>
<div id="full3" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme3"/>
</div>
</form>
</body>
instead of using Id's, you can use classes like full and theme, so your html for any given set would look like
<form method="post" action="">
<div class="full">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme"/>
</div>
</form>
Then your javascript would look like
$('.theme').change(function() {
var $this = $(this);
var background= $this.val();
$this.closest('.full').css("background-color", background);
})
edit: fixed bug, changed from parent to closest so that .full doesn't have to be a direct parent of the input.
You can achieve this with a simple for loop.
If the number of colors is not static you can use the jquery "starts with" selector to get all of the elements and then take the length.
$(window).load(function(){
$(document).ready(function(){
//if the count is static you can just hardcode it
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
$(".theme").change(function()
{
var background = $(color).val();
$(full).css("background-color", background);
});
}
});
});
Below is a working snippet. There were some issues with your HTML, and I'm not sure if you were setting the .change() event intentionally, but for the demo I just changed it directly.
$(window).load(function(){
$(document).ready(function(){
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
var background = $(color).val();
$(full).css("background-color", background);
}
});
});
.color-box {
background-color: #ffffff;
border: solid 2px black;
min-height: 30px;
margin: 5px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<label for="color">Color :</label>
<form method="post" action="">
<div id="full" class="color-box">
<input id="color1" type="hidden" name="color1" value="lightblue" class="theme"/>
</div>
<div id="full2" class="color-box">
<input id="color2" type="hidden" name="color2" value="#226666" class="theme2"/>
</div>
<div id="full3" class="color-box">
<input id="color3" type="hidden" name="color3" value="rgba(140,15,110,.6)" class="theme3"/>
</div>
</form>
So I am working on this project and I use a barcode scanner that has Windows CE 5.0 as its operating system. whenever I scan the barcode, the page automatically refreshes which should not. After it scans the barcode the user should be able to enter a number for quantity and after that the user will click the preview button which will take the user to another page. I've searched the net for solutions for this problem but still does not work. Help Please. Thank you.
<?php
include("webconfig.php");
ob_start();
session_start();
if(!isset($_SESSION["USER_CODE"]) || $_SESSION["ACTIVE"] == '0')
header("location:login.php");
$barcode = $_REQUEST["barcode"];
$item_desc = $_REQUEST["item_desc"];
$price = $_REQUEST["price"];
$quantity = $_REQUEST["txtQty"];
$pricef = number_format($price, 2);
$sql = ibase_query($conn, "SELECT * FROM ITEM_MASTER WHERE ITEM_CODE = '$barcode'") or die(ibase_errmsg());
$row = ibase_fetch_assoc($sql);
$imgname = $row['IMGNAME'];
?>
<!DOCTYPE html>
<html>
<head>
<link href="docs/css/metro.css" rel="stylesheet">
<link href="docs/css/metro-icons.css" rel="stylesheet">
<link href="docs/css/docs.css" rel="stylesheet">
<script src="docs/js/jquery-2.1.3.min.js"></script>
<script src="docs/js/metro.js"></script>
<script src="docs/js/docs.js"></script>
<script src="docs/js/prettify/run_prettify.js"></script>
<script src="docs/js/ga.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.ajaxcomplete.js"></script>
<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
<link rel="shortcut icon" href="_img/assigns-favicon.PNG">
<title>Albert Smith Signs - Warehouse Inventory System</title>
</head>
<body>
<div class="page-content">
<div class="align-center">
<div class="container">
<!-- Default -->
<div class="panel">
<div class="content">
<div class="grid">
<div class="row cells12">
<!-- Default -->
<div class="panel">
<div class="heading">
<span class="title">ENTER QUANTITY</span>
</div>
<div class="content">
<div class="grid">
<div class="row cells12">
<div class="cell colspan12">
<form onsubmit="return false;" method="post">
<label>Enter Quantity</label>
<br />
<div class="input-control text full-size" placeholder="Type search keyword here" data-role="input">
<!-- <input name="txtQty" class="keyboardInput" style="width: 225px;" type="text" value="1" autocomplete="off" /> -->
Scan Barcode
<input name="txtBarcode" id="ip" type="text" autofocus />
<br />
<br />
Enter Quantity
<input name="txtQty" id="next" type="text" />
</div>
<div class="cell colspan12">
<hr>
<br />
<br />
<br />
<br />
<br />
<input type="submit" onsubmit="return true;" name="btnPreview" style="width:80px; height:50px;" class="button primary rounded large-button" value="Preview" />
</div>
</div>
<?php
if(isset($_POST['btnPreview']) && $_POST['txtQty'] > 0)
{
$quantity = $_POST['txtQty'];
$barcode = $_POST['txtBarcode'];
$sql = "SELECT * FROM ITEM_MASTER WHERE ITEM_CODE = '$barcode'";
$query = ibase_query($conn, $sql) or die(ibase_errmsg());
if ($row = ibase_fetch_assoc($query))
{
$item_desc = $row['ITEM_DESC'];
$price = $row['COST'];
header("location:preview.php?barcode=$barcode&quantity=$quantity&item_desc=$item_desc&price=$price");
}
else{
echo "Barcode not found";
}
}
?>
</form>
<div class="cell colspan1">
</div>
</div>
</div>
</div>
</div><!-- panel -->
</div><!-- row cells12 -->
</div><!-- grid -->
</div><!-- content -->
</div><!-- panel -->
</div>
</div>
</div>
<script>
//$("#ip").focus();
/*var d = false;
$("#ip").on('change', function(){
//$("#ip").keyup(function(){
if(d == false){
$(".block").animate({"top": "-=50px"});
d = true;
}
var v = $(this).val();
$(".res").html("Search results for " + v );
$("#next").focus();
});*/
$("#ip").focus();
function init() {
key_count_global = 0; // Global variable
document.getElementById("ip").onkeypress = function() {
key_count_global++;
setTimeout("lookup("+key_count_global+")", 1000);//Function will be called 1 second after user types anything. Feel free to change this value.
}
}
window.onload = init; //or $(document).ready(init); - for jQuery
function lookup(key_count) {
if(key_count == key_count_global) { // The control will reach this point 1 second after user stops typing.
// Do the ajax lookup here.
$("#next").focus();
}
}
</script>
</body>
</html>
It is supposed to do that. But you can stop it this way:
<form method="post" name="form" id="form" onsubmit="return false;">
Add this to your FORM like you see above.
onsubmit="return false;"
That will stop it from refreshing the page.
I am new to the front end development but have quite a bit of back end dev experience. I've tried a few different approaches to the javascript below and that is just some of the things I tried.
I have the following code that shows the products. This is in n for each loop from my product list.
At the bottom of the page i have the add button.
I need to get the data-Id of each product to get the productId, price to get the price and the value of the qty input field so that I can send it through to my cart.
I can't get those values and have tried a few different things.
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">#Html.DisplayFor(modelItem => product.Code)</h3>
</div>
<div class="panel-body">
<div class="text-center" id="user_image">
<img src="../../images/chickenBreast.jpg" class="img-thumbnail" />
</div>
<br />
<div class="panel-body form-group-separated">
<div class="form-group">
<label class="control-label">Short Description:</label>
<p>#Html.DisplayFor(modelItem => product.Description)</p>
</div>
<div class="form-group">
<label class="control-label">Long Description:</label>
<p>#Html.DisplayFor(modelItem => product.LongDescription)</p>
</div>
</div>
<div class="panel-footer">
<form class="form-inline" role="form">
<div class="form-group">
<input id="qty" data-id="#product.Id" price="#product.Price" type="text" class="Product-control" placeholder="Qty" />
</div>
<button id="AddButton" class="btn btn-primary pull-right">Add to cart</button>
</form>
</div>
</div>
</div>
</div>
Here is my javascript, I have tried a few different things but nothing seems to give me the required data
<script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$("#AddButton").click(function (form) {
var productToUpdate = $("input").parent().find("data-id");
var countToUpdate = $('input[id="qty"]', form).val();
var productPrice = $(this).parent().find('price').val();
if (productToUpdate != '') {
// Perform the ajax post
$.post("~/Cart/GetCartItems", { "productId": productToUpdate, "qty": countToUpdate, "price": productPrice },
function (data) {
//Check for not process the callback data when server error occurs
//if (data.ItemCount != -1) {
// $('#cart-total').text(data.CartTotal);
//}
});
}
});
</script>
The selector data-id will never match. That is suggesting that data-id is an element type as (example) <data-id ...></data-id> try using find('input[data-id]') instead.
https://api.jquery.com/category/selectors/attribute-selectors/
https://api.jquery.com/has-attribute-selector/
Description: Selects elements that have the specified attribute, with
any value.
Example from documentation:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attributeHas demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
<script>
// Using .one() so the handler is executed at most once
// per element per event type
$( "div[id]" ).one( "click", function() {
var idString = $( this ).text() + " = " + $( this ).attr( "id" );
$( this ).text( idString );
});
</script>
</body>
</html>
// Using .one() so the handler is executed at most once
// per element per event type
$("div[id]").one("click", function() {
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attributeHas demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
<script>
</script>
</body>
</html>
I figured out the hierarchies
here is my solution
HTML
<div class="panel-footer">
<form class="form-inline" role="form">
<div class="form-group">
<input id="qty" type="text" class="Product-control" placeholder="Qty" />
</div>
<button id="AddButton" data-id="#product.Id" price="#product.Price" class="btn btn-primary pull-right">Add to cart</button>
</form>
</div>
The javascript
<script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$("#AddButton").click(function () {
var productId = $(this).attr('data-id');
var productPrice = $(this).attr('price');
var qty = $(this).prev().children(".Product-control").val();
if (productId != '') {
// Perform the ajax post
$.post("~/Cart/GetCartItems", { "productId": productId, "qty": qty, "price": productPrice },
function (data) {
//Check for not process the callback data when server error occurs
//if (data.ItemCount != -1) {
// $('#cart-total').text(data.CartTotal);
//}
});
}
});
</script>
I have the following lines of js
var select_container = "container_"+parts[2];
var get_container = document.getElementById(select_container);
The function this is part of is failing and when I look in firebug it returns get_container as undefined. I have checked select_container is the correct value and that there isn't a duplicate id on page.
This is called by an onclick event so I can't see waiting for the page to load being an issue (the result is same no matter how long I wait).
revelent html example:
<div id="container_0">
I'm stumped!
edit
This is all the Javascript from the parent functions
/*detects links in the form editor and uses them to adjust the layout*/
window.onload = function () {
clickDetection();
} /*detect clicks on interesting links*/
function clickDetection() {
var canvas = document.getElementById("content");
var dumbLinks = canvas.getElementsByTagName("a");
for (var i = 0; i < dumbLinks.length; i++) {
dumbLinks[i].onclick = function () {
clickRoute(this);
return false
};
}
} /*reroute click behaviour to correct function*/
function clickRoute(link_object) {
var linkId = link_object.getAttribute("id");
var linkParts = linkId.split("_");
if (linkParts[1] == "delete") {
delete_route(linkParts);
} else if (linkParts[1] == "new") {
new_route(linkParts);
}
}
function delete_route(parts) {
alert(parts);
if (parts[0] == "field") {
var select_container = "container_" + parts[2];
var get_container = document.getElementById(select_container);
document.removeChild(get_container);
} else if (parts[0] == "option") {
alert("delete a option");
}
}
full (typical) html (please note repeating sections have been cut for length and other details changed for secuity):
<!DOCTYPE HTML>
<html>
<head>
<!-- determines header content -->
<meta charset="utf-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<script type="text/javascript" src="some.js"></script>
<title>Title of the document</title>
</head>
<body>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav linke</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div id="content">
<h1>screen name</h1>
<form method="post" action="#this">
<label for="summary">Select an item to edit:<br></label>
<select name="summary" id="summary">
<option value="generic">generic</option>
<option value="updated">updated</option>
</select>
<input type="submit" name="summary_select" value="Select">
</form>
<h2>screen name</h2>
<div id="container_7">
<form method="post" action="#this">
<fieldset><legend>existing segment</legend>
<p><a id="field_delete_7" href="#">Delete field</a></p>
<label for="name_7">Field Name</label><input type=text id="name_7" name="name" value="Colour"><br>
<label for="type_7">Data type expected</label>
<select name="type" id="type_7">
<option value="name" >Name</option>
<option value="email" >Email Address</option>
<!-- cut for length -->
</select>
<p>Some text</p>
<label for="option_7_0">Option Value</label><input type=text id="option_7_0" name="option_7_0" value="Red">
<a id="option_delete_7_0" href="#">Delete option</a><br>
<label for="option_7_1">Option Value</label><input type=text id="option_7_1" name="option_7_1" value="Green">
<a id="option_delete_7_1" href="#">Delete option</a><br>
<label for="option_7_2">Option Value</label><input type=text id="option_7_2" name="option_7_2" value="Blue">
<a id="option_delete_7_2" href="#">Delete option</a><br>
<a id="option_new_7" href="#">Add new option</a>
<input type="submit" name="detail" value="Finish"></fieldset></form></div>
<p><a id="field_new" href="#">Add new field</a></p>
</div>
<!-- determines footer content -->
footer content
</body>
</html>
Change this:
document.removeChild(get_container);
to this:
get_container.parentNode.removeChild(get_container);
or if the containers are a direct descendant of body, then you could do this:
document.body.removeChild(get_container);