We Keep Coding

Remove any specific html code using javascript

In the past I used Google Developer Console to delete some specific divs on a page. I could do it manually of course but in some cases where the divs where many I had to use the console. I had a single line code that did the job (I found it while searching the internet) but I lost my note.
So how can I delete using javascript any html code (by copy pasting the code).
Something like:
elements = $('<div ... </div>');
elements.remove();
OR
$('<div ... </div>').remove();
Any ideas? I am not an expert in javascript (obviously) and I've been searching stackoverflow for hours without finding anything that works.
UPDATE: I think some people might get confused with my question. Google developer console accepts javascript command lines. So even though I ask for javascript I will use the code on the google developer console.
UPDATE 2 :
Here is an example of a div I need to delete. Keep in mind I want to copy paste the entire code in the javascript code. Not just identify the div.
<div class="entry-status-overlay" data-entry-status="declined">
<div class="entry-status-overlay__inner">
<span class="entry-status-overlay__title">Declined</span>
</div>
</div>
It's the data-entry-status="declined" that makes that div unique so I can't just identify the div using an id selector or a class selector. I need to put the entrire thing there and remove it.
I tried:
$('<div class="entry-status-overlay" data-entry-status="declined"><div class="entry-status-overlay__inner"><span class="entry-status-overlay__title">Declined</span></div></div>').remove();
It didn't remove the div.

Try to search the dom by its outerHTML.
function deleteDomByHtml(html){
html=html.replace(/\s/g,'');
$("*").each(function(){
if(this.outerHTML.replace(/\s/g,'')===html){
$(this).remove();
}
});
}
And try this line on this page:
deleteDomByHtml(`<span class="-img _glyph">Stack Overflow</span>`);

You cannot do by simply pasting the code. That will remove all the div element.
You may need a specific selector like id,class or child to specific parent to remove the element from the dom.
Consider this case the divs have common class but the data-entry-status is different. So you can get the dom using a selector and then check the dataset property.
For demo I have put it inside setTimeout to show the difference. In application you can avoid it
setTimeout(function() {
document.querySelectorAll('.entry-status-overlay').forEach(function(item) {
let getStatus = item.dataset.entryStatus;
if (getStatus === 'declined') {
item.remove()
}
})
}, 2000)
<div class="entry-status-overlay" data-entry-status="declined">
<div class="entry-status-overlay__inner">
<span class="entry-status-overlay__title">Declined</span>
</div>
</div>
<div class="entry-status-overlay" data-entry-status="accepted">
<div class="entry-status-overlay__inner">
<span class="entry-status-overlay__title">accepted</span>
</div>
</div>

Just add any attribute with [] and it will remove the element.
$('[class="entry-status-overlay"]').remove();
/*OR*/
$('[data-entry-status="declined"]').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="entry-status-overlay" data-entry-status="declined">
<div class="entry-status-overlay__inner">
<span class="entry-status-overlay__title">Declined</span>
</div>
</div>

function del(){
var h = document.body.outerHTML;
h = h.match('<div>...</div>');
h.length--;
return h;
}
I guess this will work just give it a try... i tried on browser console and it worked, this way you can match the exact you want.

I might as well add my take on this. Try running this in your console and see the question vanish.
// convert the whole page into string
let thePage = document.body.innerHTML,
string = [].map.call( thePage, function(node){
return node.textContent || node.innerText || "";
}).join("");
// I get some string. in this scenario the Question or you can set one yourself
let replacableCode = document.getElementsByClassName('post-layout')[0].innerHTML,
string2 = [].map.call( replacableCode, function(node){
return node.textContent || node.innerText || "";
}).join("");
// replace whole page with the removed innerHTML string with blank
document.body.innerHTML = thePage.replace(replacableCode,'');

If you want to identify divs with that particular data attribute, you can use a data-attribute selector. In the example below, I've used a button and click event to make the demo more visual, but in the console the only line you'd need would be:
$('div[data-entry-status="declined"]').remove();
$(function() {
$("#testbutton").click(function() {
$('div[data-entry-status="declined"]').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-status-overlay" data-entry-status="declined">
<div class="entry-status-overlay__inner">
<span class="entry-status-overlay__title">Declined</span>
</div>
</div>
<div id="x">Some other div</div>
<button type="button" id="testbutton">Click me to test removing the div</button>
See https://api.jquery.com/category/selectors/attribute-selectors/ for documentation of attribute selectors.
P.S. Your idea to paste some raw HTML into the jQuery constructor and then execute "remove" on it cannot work - you're telling jQuery to create an object based on a HTML string, which is, as far as it's concerned, a new set of HTML. It does not try to match that to something existing on the page, even if that exact HTML is in the DOM somewhere, it pays it no attention. It treats what you just gave it as being totally independent. So then when you run .remove() on that new HTML...that HTML was never added to the page, so it cannot be removed. Therefore .remove() has no effect in that situation.

Angular ng-show doesn't work properly when value changes

I'm trying to show div depends on permission of log in user.
<div class="container">
<p> {{permission}}</p>
<div ng-show="permission" class="admin_panel">
....
</div>
</div>
and in controller, it is set:
$scope.init = function(){
if($window.sessionStorage.isAdmin){
$scope.permission = $window.sessionStorage.isAdmin;
}
$log.info("are you admin??? " + $scope.permission);
};
$scope.init();
In console, I could verify that permission was set to false and {{permission}} also showed
its value is false. However, ng-show is still showing even though the value is false. I'm not sure what's wrong with this.

Have you tried ng-show="permission === true;"? ng-show, to my understanding, is meant to evaluate whatever is inside the quotes. this would just explicitly state the evaluation. I've had experiences where just having a variable inside the quotes isn't an evaluation that ng-show recognizes for some odd reason.

I had a similar problem except that my variable was changed inside
a timeout function like this:
<div ng-show="check"> something .... </div>
setTimeout(function(){
check = false;
},500);
the problem was solved when i added $scope.$apply() inside timeout:
setTimeout(function(){
check = false;
$scope.$apply()
},500);

If you want to show or hide some content that depends of the user permissions, instead of using "ng-show", you should use "ng-if".
ng-show/ng-hide only adds or remove a CSS class that show or hide that element (display:none), but an user could change it easily in the browser.
Using ng-if: "If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM."
https://docs.angularjs.org/api/ng/directive/ngIf

I have a same problem and every thing work fine except ng-show. I missed something stupid. when you call a controller from different part of your document you can not share data between them. for example i have 2 div tag
in document
<div id="1" ng-controller="contentCtrl">
<div ng-click="toggleSidebarShow()">
<!-- some code here -->
</div>
</div>
<div id="2" ng-controller="contentCtrl">
<div ng-show="showSidebar">
</div>
</div>
showSidebar between contentCtrl of div 1 and div2 wasn't share.
in controller
// some code
$scope.showSidebar = true;
$scope.toggleSidebar = function (){
$scope.showSidebar = ! $scope.showSidebar;
};
but this code doesn't work because toggleSidebar called outside of the div2 tag and have it's own showSidebar. To conquer this problem you had to use service or modules. see this link to more information.

One more thing to check is when your page loads, in the inspect element check if the element you are trying to use ng-show on is rendered inside the element which has the ng-controller directive.
If your element with ng-show is outside the ng-controller element then ng-show wont work

Create own numpad with inputs

I've been searching the web for some tips regarding how to make your own numpad, created with html code, to act as a numpad would on the computer.
I have this numpad on my website that would give an input to a textfield in the same div. I've given a value to each button and now I guess I would have to create something more so that the numbers will add to my text field.
I'm really a beginner with programming so maybe this is really easy. Thanks for the help!

You could do it, alternatively, with jQuery. jQuery is better IMHO if you need a simple easy solution (jQuery is generally easier and faster).
HTML:
<div id="myDiv"> </div> //the div to which we add text
<div id="buttonContainer"> //this is the div containing the numbers (the numpad)
<button value="one"> one </button>
<button value="two"> two </button>
</div>
jQuery:
$("#buttonContainer button").click(function() {
$("#myDiv").append($(this).val());
});
http://jsfiddle.net/DLzUU/1/
What this does is: when you click any button inside the div with id of 'buttonContainer', it adds its value to the div with the id of "myDiv".
On the Javascript subject, if you want a VERY good guide: http://javascript.info/

what you need is to learn javascript. With javascript you will be able to write code to do this.
<script>
function AddValueToTextField(val)
{
document.getElementByID( <textfiled ID> ).value += val;
}
</script>
<button onClick="AddValueToTextField(this.value)"></button>
this is only very basic but it is a rough idea of what is needed, the button is set to call the function "AddValueToTextField" when it is clicked. When the function is called the value of the button is sent along with it. Inside the function it gets a handle on the textfield and adds the value of the button to whatever was already there, I'd suggest looking at:
http://www.w3schools.com/js/
as a place to start learning javascript.

you can try http://keith-wood.name/keypad.htmlkeypad example, this is an awesome example

$(document).ready(function(){
var selected;
$(".admin_loginid input").focus(function(){
selected = $(this);
});
$(".loginbtn").click(function(){
selected.val(selected.val() + $(this).val());
});
});
Solved it that way and it works really well, thanks for the help! Now my selected input box takes the input from the numpad that i've created.

jQuery code behaves wrong

jQuery is not working the way it should and is completely ignoring the logic.
If I click a link, it shows up the given description, and fades the other menus.
If I click the same link again, it should hide that description, and fade the other links back in.
But instead it just hides the text, and doesn't fade them back in.
When running the code alone from the console and when you click on the whitespace next to the paragraphs, it works just fine.
Site for reference
jQuery:
$('a[class]').click(function(){
var clas = $(this).attr('class');
$('#'+clas.substring(0,2)).fadeTo('fast',1).removeClass('faded');
$('p:not(#'+clas.substring(0,2)+')').fadeTo('fast',0.3);
$('.ans:visible').toggle('slow');
$('#'+clas.substring(0,2)+'a'+':hidden').fadeIn('slow');
$('p:not(#'+clas.substring(0,2)+')').addClass('faded');
return false;
});
$('p:not(p.faded)').click(function(){
$('.ans:visible').toggle('slow');
$('p[class="faded"]').fadeTo('fast',1).removeClass('faded');
});
HTML:
<p id="q1">1. <a class="q1">Nem látom a kedvenc karakterem, hozzá tudod adni?</a>
<br>
<span id="q1a" style="display:none;" class="ans">
Persze. Írj egy e-mail-t a djdavid98#gmail.com címre a karakter nevével.
<br>
<span style="color:red">OC-kat és fillyket NEM adok hozzá.</span>
</span>
</p>
<p id="q2">2. <a class="q2">Hogyan tudok karaktert választani?</a>
<br>
<span id="q2a" style="display:none;" class="ans">
Látogass el a Karakterválasztás oldalra, ahol kiválaszthatod a kedvenced.
<br>
Haználhatod továbbá a "<i>Véletlenszerű karakter</i>" linket is.
</span>
</p>
<p id="q3">3. <a class="q3">Mi ennek az oldalnak a célja/alapötlete?</a>
<br>
<span id="q3a" style="display:none;" class="ans">
Eredetileg a milyennapvanma.hu weboldal pónisított változataként indult,
<br>
de azóta már nagy mértékben továbbfejlődött az oldal.
</span>
</p>

I admire your self-confidence: your code doesn't work so you assume the problem is with jQuery.
In your code, this statement:
$('p:not(p.faded)').click(function(){
...binds a click handler to any elements that don't have the "faded" class at that moment. Which would be all elements since none are faded initially. If you want it to apply only to elements that have not later had that class added you need to use a delegated handler which you assign via .on() (or .delegate() if using jQuery older than 1.7, or .live() if using a ridiculously old jQuery):
$(document).on('click', 'p:not(p.faded)'), function() {
Ideally you wouldn't bind the handler to document, you'd use the closest anscestor of the paragraphs in question, but since you haven't shown that much markup I'll leave that part to you.
Also though, you return false; from your click handler on the anchor elements, which prevents the click event from propagating up to the paragraphs anyway.
However, I think you're making the whole thing more complicated than you need to. The following code gets the job done:
var $questions = $('p'); // add class selectors here
$questions.click(function(){
var $this = $(this),
isOpen = $this.hasClass('open');
$this.fadeTo('fast',1).toggleClass('open',!isOpen)
.find('span.ans').toggle('slow');
$questions.not(this).fadeTo('fast', isOpen ? 1 : 0.2)
.removeClass('open')
.find('span.ans').hide('slow');
});
​
That is, when any paragraph is clicked, figure out whether it already has the answer open. Then make sure the clicked one is visible, and toggle its answer. Then take all of its sibling paragraphs and fade them in or out as appropriate and hide their answer.
Where I've put the comment "add class selectors here" it would be good to add a class to identify which paragraphs in your document are the questions.
Demo: http://jsfiddle.net/DxFDP/2

I would never use jQuery to apply styles to the code, but simple add and remove classes...
It will get messy, and sometime, we can simplify instead of complicate things.
here is simple example: http://jsbin.com/amiloc/1/
the same, but without <li>'s: http://jsbin.com/amiloc/3/
added colors so we know what's going on "under the hood", will let you judge by yourself.

Setting the HTML property of an element in jQuery

Please check the codes..
$(".editable").live("click",function(){
CurrentOBJhtml = $(this).text();
nextHtml = "<input type='text' class='hoverable' value='"+CurrentOBJhtml+"' />";
var c = nextHtml;
alert(c); //here two alert box comes....
$(this).html(c);
});
When i alert c ,it alerting two values in two alert boxes...
first value is <input type='text' value='myname' class='hoverable' />
second one is <input type='text' value='' class='hoverable' /> where the second one doesnt have the value .
When i comment the last line ($(this).html(c);) then it only giving the first result.
What is the problem with me ? i am totally confused.
please help me to solve this issue.
Thank you .
Update :
HTML :
<fieldset id="user_info_module">
<label>username:</label>
<label class="editable" id="user_info_username">
<label>Email:</label>
<label id="user_info_email"> </label>
<label>Default page:</label>
<label id="user_info_defaultpage"></label>
<label>mobile:</label><label id="user_info_mobile"></label>
<label>country:</label><label id="user_info_country"></label>
<label>address:</label><label id="user_info_address"></label>
<label>pincode:</label><label id="user_info_pincode"></label>
<label>landline:</label><label id="user_info_landline"></label>
</fieldset>
http://jsfiddle.net/M3J2p/1/

First thing put your jquery code inside the $(document).ready(function()); handler.
and check this jsfiddle, it is not showing any double alert box to me. when you click a element then this will refer to that particular element not the others.
Update your html code in question to confirm about the exact problem or create a example jsfiddle for your problem.
Edit: Error reasons and solved
Before jQuery 1.7, to stop further handlers from executing after one
bound using .live(), the handler must return false. Calling
.stopPropagation() will not accomplish this.
$("a").live("click", function(event){
event.preventDefault();
});
Check your updated jsfiddle as per your code. you have missed to close the one tag and the above event bubbling problem occurs when you use this. In updated jquery use .on() ..
check .live() documentation at jQuery to konw about this better.

May be you have two elements with the class "editable" or that you calling the code above twice. Do you have it in document.ready? or calling it through function?

I suppose that $(".editable") finds more than one element. If you want to find a specific element, consider using the Id or you can also check whether the target is the correct one in the callback.
$(".editable").live("click",function(event)
{
if (event.target == mytarget)
{
// do something
}
});