Develop Reference

Remove dynamically created elements by class name Javascript

So, in plain terms I am creating a Chrome Extension that so far can only save links from the internet but not delete them. What I want to add is a "remove" button for deleting unwanted links. So far I haven't got that to work.
The buttons I want to remove are added using JavaScript. Each new block of HTML features a "remove" button but clicking that button does nothing. I have tried binding listeners to each element using a for loop but that doesn't seem to work.
The code runs without errors and I'm certain that the issue is a slight oversight but I have only just started using JavaScript so I'm lost for solutions at the moment.
I have included all the code because I don't want to leave out anything that might be imperative to finding a solution.
It starts with the code for adding a link, followed by removing a single link and then removing all links at once. Thank you all for any help, really want to get this working.
https://github.com/mmmamer/Drop Repository for the rest of the code. Mainly popup.html and popup.css.
var urlList = [];
var i = 0;
document.addEventListener('DOMContentLoaded', function() {
getUrlListAndRestoreInDom();
// event listener for the button inside popup window
document.getElementById('save').addEventListener('click', addLink);
});
function addLink() {
var url = document.getElementById("saveLink").value;
addUrlToListAndSave(url);
addUrlToDom(url);
}
function getUrlListAndRestoreInDom() {
chrome.storage.local.get({
urlList: []
}, function(data) {
urlList = data.urlList;
urlList.forEach(function(url) {
addUrlToDom(url);
});
});
}
function addUrlToDom(url) {
// change the text message
document.getElementById("saved-pages").innerHTML = "<h2>Saved pages</h2>";
var newEntry = document.createElement('li');
var newLink = document.createElement('a');
var removeButton = document.createElement('button');
removeButton.textContent = "Remove";
//removeButton.createElement('button');
removeButton.type = "button";
removeButton.className = "remove";
newLink.textContent = url;
newLink.setAttribute('href', url);
newLink.setAttribute('target', '_blank');
newEntry.appendChild(newLink)
newEntry.appendChild(removeButton);
newEntry.className = "listItem";
document.getElementById("list").appendChild(newEntry);
}
function addUrlToListAndSave(url) {
urlList.push(url);
saveUrlList();
//}
}
function saveUrlList(callback) {
chrome.storage.local.set({
urlList
}, function() {
if (typeof callback === 'function') {
//If there was no callback provided, don't try to call it.
callback();
}
});
}
// remove a single bookmark item
document.addEventListener('DOMContentLoaded', function() {
getUrlListAndRestoreInDom();
var allButtons = document.getElementsByClassName('remove');
function listenI(i) {
allButtons[i].addEventListener('click', () => removeMe(i));
}
for (var i = 0; i < allButtons.length; i++) {
listenI(i);
}
});
function removeMe(i) {
var fullList = documents.getElementsByClassName('listItem');
listItem[i].parentNode.removeChild(listItem[i]);
}
//remove all button
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("remove-all").addEventListener('click', function() {
var removeList = document.getElementsByClassName("listItem");
while(removeList[0]) {
removeList[0].parentNode.removeChild(removeList[0]);
}
})
});

chrome.storage.local.get() is asynchronous. So when you try to add the event listeners to the Remove buttons, they're not in the DOM yet.
You can add the listener in the addUrlToDom() function instead. That way you'll also add the event listener when you create new buttons.
function addUrlToDom(url) {
// change the text message
document.getElementById("saved-pages").innerHTML = "<h2>Saved pages</h2>";
var newEntry = document.createElement('li');
var newLink = document.createElement('a');
var removeButton = document.createElement('button');
removeButton.textContent = "Remove";
//removeButton.createElement('button');
removeButton.type = "button";
removeButton.className = "remove";
newLink.textContent = url;
newLink.setAttribute('href', url);
newLink.setAttribute('target', '_blank');
newEntry.appendChild(newLink)
newEntry.appendChild(removeButton);
removeButton.addEventListener("click", function() {
var anchor = this.previousElementSibling;
var url = anchor.getAttribute("href");
removeUrlAndSave(url);
this.parentNode.remove();
});
newEntry.className = "listItem";
document.getElementById("list").appendChild(newEntry);
}
function removeUrlAndSave(url) {
var index = urlList.indexOf(url);
if (index != -1) {
urlList.splice(index, 1);
saveUrlList();
}
}

javascript code is not opening in new tab

I've come across many forum posts regarding opening window as a new tab instead of new window but no use. When I click on a link/something.. at present it is opening in a new window but i want a tab instead of window.
Here is my sample code:
$(document).on('click', '#myTabs li', function (event) {
if ($(event.target).attr('class') != 'closeIcon') {
var temp_id = $(this).attr('id');
selectedId = temp_id.substring(0, temp_id.length - 6);
$('input:radio[id=all]').prop('checked', true);
loadAll();
}
});
function loadAll() {
var clientForm = document.createElement("form");
var target = "Map" + (windowCount++);
clientForm.target = target;
clientForm.method = "POST"; // or "post" if appropriate
clientForm.action = "../Test.jsp";
var idInput = document.createElement("input");
idInput.type = "hidden";
idInput.name = "id";
idInput.value = id;
clientForm.appendChild(idInput);
document.body.appendChild(clientForm);
var nameDisplay = document.createElement("input");
nameDisplay.type = "hidden";
nameDisplay.name = "idText";
nameDisplay.value = idText;
clientForm.appendChild(nameDisplay);
document.body.appendChild(clientForm);
var dateDisplay = document.createElement("input");
dateDisplay.type = "hidden";
dateDisplay.name = "dateText";
dateDisplay.value = dateText;
clientForm.appendChild(dateDisplay);
document.body.appendChild(clientForm);
map = window.open('', target, '_blank');
map = window.open("", target, "status=0,title=0,height=600,width=800,scrollbars=1");
if (map) {
clientForm.submit();
} else {
alert('You must allow popups for this map to work.');
}
}

I see this line in your code, which specifies width and height of the new window:
map = window.open("", target, "status=0, title=0,height=600,width=800,scrollbars=1");
When you specify a width and a height the browser will always open in a new window instead of a new tab.
If you specify three parameters, your statement will always open a new window, not a new tab.
Your statement should probably read:
window.open(<URL>, '_blank');
You can find more details here.

How to disable Headers in table properties for CkEditor?

How can I disable headers in table properties for CKEditor, like that of rows and columns in the image given below.
I am working on CKEditor version 3.0 in an asp.net web application, I tried to make some changes in table.js (inside the plugins-->table folder) but didn't get the desired output.

Use dialogDefinition event (jsFiddle):
CKEDITOR.on( 'dialogDefinition', function( evt ) {
var dialog = evt.data;
if ( dialog.name == 'table' ) {
// Get dialog definition.
var def = evt.data.definition;
def.onShow = function() {
var select = this.getContentElement( 'info', 'selHeaders' );
select.disable();
}
}
} );

You can try something like this, it works for me.
window.CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
ev.editor.getCommand( 'table' ).allowedContent = "table{width,height}[align,border,cellpadding,cellspacing,summary];caption tbody thead tfoot;th td tr;table[id,dir](*){*}";
if (dialogName == "table" || dialogName == "tableProperties") {
var infoTab = dialogDefinition.getContents("info");
infoTab.get("txtWidth")["default"] = "";
infoTab.get("txtCellSpace")["default"] = "";
infoTab.get("txtCellPad")["default"] = "";
infoTab.get("txtBorder")["default"] = "";
infoTab.get("selHeaders")["items"].pop();
infoTab.get("selHeaders")["items"].pop();
var advancedTab = dialogDefinition.getContents( 'advanced' );
advancedTab.remove( 'advCSSClasses' );
}
});

Changing erik vold toolbarbutton image on the fly

I'm trying to make a firefox extension with the SDK. (if I can avoid XUL i'm happy)
I'm using erik vold toolbarbutton
But I need to change the toolbar image on the fly.
My lib/main.js (background page) is :
var tbb = require("toolbarbutton").ToolbarButton({
id: "My-button",
label: "My menu",
image: Data.url('off.png'),
onCommand: function(){
Tabs.open(Data.url("signin.html"));
}
});
tbb.setIcon({image:Data.url('on.png')});
console.log(tbb.image);
tbb.moveTo({
toolbarID: "nav-bar",
forceMove: false // only move once
});
tbb.image is correct, but the button isn't refreshed.
I tried to change packages/toolbarbutton-jplib/lib/toolbarbutton.js
function setIcon(aOptions) {
options.image = aOptions.image || aOptions.url;
getToolbarButtons(function(tbb) {
tbb.image = options.image;
tbb.setAttribute("image", options.image); // added line
}, options.id);
return options.image;
}
But it doesn't seem to refresh...
Is erik vold lib enough for this kind of need ?

also be sure to update with this fix https://github.com/voldsoftware/toolbarbutton-jplib/pull/13/files

there is a setIcon method and a image setter that you can use to update the toolbar button's image

I had the same problem so I just wrote the code my self using this tutorial:
http://kendsnyder.com/posts/firefox-extensions-add-button-to-nav-bar
Try this, I rewrote my code to fit your needs:
var btn = null;
var btnId = 'My-button';
var btnLabel = 'My menu';
var btnIconOn = 'on.png';
var btnIconOff = 'off.png';
var {Cc, Ci} = require('chrome');
var self = require("sdk/self");
var mediator = Cc['#mozilla.org/appshell/window-mediator;1'].getService(Ci.nsIWindowMediator);
// exports.main is called when extension is installed or re-enabled
exports.main = function(options, callbacks) {
btn = addToolbarButton();
// do other stuff
};
// exports.onUnload is called when Firefox starts and when the extension is disabled or uninstalled
exports.onUnload = function(reason) {
removeToolbarButton();
// do other stuff
};
// add our button
function addToolbarButton() {
// this document is an XUL document
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
if (!navBar) {
return;
}
var btn = document.createElement('toolbarbutton');
btn.setAttribute('id', btnId);
btn.setAttribute('type', 'button');
// the toolbarbutton-1 class makes it look like a traditional button
btn.setAttribute('class', 'toolbarbutton-1');
// the data.url is relative to the data folder
btn.setAttribute('image', self.data.url(btnIconOff));
btn.setAttribute('orient', 'horizontal');
// this text will be shown when the toolbar is set to text or text and iconss
btn.setAttribute('label', btnLabel);
navBar.appendChild(btn);
return btn;
}
function removeToolbarButton() {
// this document is an XUL document
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
var btn = document.getElementById(btnId);
if (navBar && btn) {
navBar.removeChild(btn);
}
}
btn.addEventListener('click', function() {
Tabs.open(Data.url("signin.html"));
}, false);
tbb.setIcon({image:self.data.url(btnIconOn)});

CKEditor link dialog removing protocol

In my CKEditor I removed the 'linkType' and 'protocol' inputs of the link dialog.
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' )
{
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'linkType' );
infoTab.remove( 'protocol' );
}
});
However, evertype I type in something like https://google.com as soon as I type in the 'g' the https:// gets removed.
I checked the output and it always says http:// disregarding the input.
How can I turn this stupid behaviour off?

After much research, debugging and tweaking, I've finally managed to pull this off!!!
Here's how I do it:
CKEDITOR.on('dialogDefinition', function(e) {
// NOTE: this is an instance of CKEDITOR.dialog.definitionObject
var dd = e.data.definition;
if (e.data.name === 'link') {
dd.minHeight = 30;
// remove the unwanted tabs
dd.removeContents('advanced');
dd.removeContents('target');
dd.removeContents('upload');
// remove all elements from the 'info' tab
var tabInfo = dd.getContents('info');
while (tabInfo.elements.length > 0) {
tabInfo.remove(tabInfo.elements[0].id);
}
// add a simple URL text field
tabInfo.add({
type : 'text',
id : 'urlNew',
label : 'URL',
setup : function(data) {
var value = '';
if (data.url) {
if (data.url.protocol) {
value += data.url.protocol;
}
if (data.url.url) {
value += data.url.url;
}
} else if (data.email && data.email.address) {
value = 'mailto:' + data.email.address;
}
this.setValue(value);
},
commit : function(data) {
data.url = { protocol: '', url: this.getValue() };
}
});
}
});

Here's how I removed the protocol in v4.5.1:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName === 'link') {
var infoTab = dialogDefinition.getContents('info');
infoTab.remove('protocol');
var url = infoTab.get('url');
url.onKeyUp = function(){};
url.setup = function(data) {
this.allowOnChange = false;
if (data.url) {
var value = '';
if (data.url.protocol) {
value += data.url.protocol;
}
if (data.url.url) {
value += data.url.url;
}
this.setValue(value);
}
this.allowOnChange = true;
};
url.commit = function(data) {
data.url = { protocol: '', url: this.getValue() };
};
}
});

I'm afraid there's no way to change it. You have to manually edit a few lines of the code to make it working your way.

I recently found a way to hide the Link Type so you don't have to remove it totally. Set the style to display: none like the following:
infoTab.get( 'linkType' ).style = 'display: none';
I think it works for the Protocol as well, but I haven't tested it. I answered the same question here
Hope this helps someone!

For the lazy people like me, just do a quick core file hack:
open plugins/link/dialogs/link.js
in the minimized version find d=/^(http|https|ftp|news):\/\/(?=.)/i.exec(b);
remove http|https|ftp|
save file, upload it to your server
If it does not work after reload, this might be a cache problem. Open browser in private mode, navigate to your ckeditor and try it again. Good luck.