Member Avatar for neoanomally

Hello,

I have this anomaly on a website I support. There is a button that allows users to contacts from a contact list. The button works fine in other browsers, and has worked fine in the past for Google Chrome. Someone notified me that in Chrome the button no longer does what's expected and instead the entire button disappears instead of removing the contacts from the list.

How do I even go about debuggin this and is this a known problem?

Thank you

  • 2 Contributors
  • 4 Replies
  • 285 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by neoanomally

Dani AI

Generated

correctly pinpointed the root cause: a global function named remove can clash with the DOM's own remove() functionality in modern browsers (Chrome included). Inline onclick handlers run in a scope where the element's properties/methods can shadow globals, so a bare call like remove() may resolve to the element's method and immediately remove the button itself — explaining why it disappears in Chrome but not in IE.

There are a few additional issues in the posted markup that make behavior unpredictable across browsers: the form appears to be closed before the buttons (invalid HTML), onsubmit="return false();" mistakenly calls false as a function, and using names with brackets (e.g. sendTo[]) while accessing elements through the form object is brittle. Relying on form properties instead of stable selectors increases cross-browser differences.

Practical fixes and safer patterns:

  • Rename the global function (avoid remove, save, etc.). Use descriptive names like removeSelectedRecipients.
  • Stop using inline handlers; attach listeners via script and query elements by id.
  • Remove options by iterating backwards or repeatedly removing the selected index to avoid index skipping.
    Example pattern (attach an id to the button and the select):
document.getElementById('removeBtn').addEventListener('click', function () {
  var sel = document.getElementById('sendTo');
  for (var i = sel.options.length - 1; i >= 0; i--) {
    if (sel.options[i].selected) sel.remove(i);
  }
});

Quick debugging tips: open Chrome DevTools and check the Console for errors; type typeof remove to see what the identifier resolves to; try renaming the function to confirm the collision; and run the page through an HTML validator to catch markup problems that change DOM structure between browsers. , these combined changes should make behavior consistent across browsers.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

Can you provide a link to this website so that we can look at the source code or provide the relavent code here by posting it, or upload the code to jsfiddle.

Member Avatar for neoanomally

This is the code for the form itself and the button.

<form method="post" name="recipForm" id="recipForm" onSubmit="return false();">
<span style="cursor: help; font-weight: bold;" onMouseOver="tooltip(currtip);" onMouseOut="bye();">
Current Recipient List</span>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td>
<select name="sendTo[]" size="5" id="sendTo" multiple="multiple">
<option value="IDENTIFICATION, something@blank.com">Person - Person - Email</option></select>
</form>
<input type="button" value="Remove Selected Recipients" onClick="remove();"/><br/>
<input type="button" value="Save Current Recipient List" onClick="saverecip();"/>

This is the code for the javascript for remove and saverecip...

function remove(){
    var st = document.getElementById('recipForm').sendTo;
    for(i=0;i<st.length;i++){
        if(st[i].selected){
            st[i] = null;
            i--;
        }
    }
}


function saverecip(){
    var st = document.getElementById('recipForm').sendTo;
    var save = document.getElementById('saveList').save;

    for(i=0;i<save.length;i++){
        save[i] = null;
        i--;
    }

    for(i=0;i<st.length;i++){
        save.options[save.length] = new Option(st[i].text,st[i].value);
    }

    for(i=0;i<save.length;i++){
        save[i].selected = true;
    }

    document.getElementById('saveList').submit();
}
Member Avatar for JorgeM

well, it looks like the function you called "remove()" is already the name of a method in JavaScript. Why it works in IE...well as you may be aware, IE doesnt necessarily follow the W3C standards all the time. When I rename it to removeMe() and also update the name to removeMe() in the onclick reference, the item is removed from the select element as expected.

Also, this may be a simplier function to use to remove items from a select element...

function removeMe(){
    var x=document.getElementById("sendTo");
    x.remove(x.selectedIndex);
}

Simple full example...

<!DOCTYPE html>
<html>
<body>
<select id="sendTo" multiple="multiple">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option></select>

<br/>
<input type="button" value="Remove Selected Recipients" onclick="removeMe();"/>

<script>
function removeMe(){
    var x=document.getElementById("sendTo");
    x.remove(x.selectedIndex);
}
</script>
</body>
</html>
Edited by JorgeM
Member Avatar for neoanomally

Thank you very much for the explanation!!! I will do this first thing in the morning at work tomorrow!!! I didn't write the code; and I recently became the steward of the site.

It's strange because it works in both IE, and Firefox!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.