Нужен скрипт для удаления лишних span 'ов в innerHTML

@svtbox · Регистрация: 09.01.2010

Студворк — интернет-сервис помощи студентам

Есть джава который выполняет перевод с английского и наоборот. На выходе посредством innerHTML в диве с id="dest" получаем ряд span 'ов вариантов перевода отделенных .. (горизонтальным двоеточием). Слова как обычно отделены пробелами. Например если в поле оригинала ввести "моя работа" то в поле перевода получим:

HTML5
1
2
3
<div id="dest">
<span>mine</span>..<span>my</span> <span>job</span>..<span>work</span>
</div>

Нужен простой скрипт с помощью которого если кликнуть в поле перевода по выбранному варианту, остальные чтобы удалились. Например, если кликнув по my, то span в котором mine чтобы с innerHTML удалился и если кликнув по job то work удалился. Для некоторых слов есть много вариантов перевода

Добавлено через 2 часа 40 минут
Неужели так сложно? Хоть подскажите как удалять лишние span 'ы при клике по них. Нашел вот упоминания о $('span').remove() на jquery, но это если бы спан был сразу в диве и removeChildren(node) но не знаю как правильно вытащить span с innerHTML, как склеить эти функции или что другое подскажите...

@kalabuni · 18.12.2012, 05:09

javascript работает не просто так, а всегда - по каким-то событиям
т.е. должно что-то произойти на странице, чтобы запустился код
сам по себе никакой код запуститься не может

вот и в вашем случае - нужно кликнуть по 'у, чтобы его удалить
клик по 'у - это и есть то самое событие, по которому запустится код удаления этого 'a

однако, необходимо этот самый код удаления, который запускается при клике по 'у, этим 'ам назначить
и, самое смешное, для запуска кода назначения тоже нужно какое-то своё событие

в вашем случае это событие вы не определили
рассказали, что у вас происходит перевод текста с английского и наоборот
но не рассказали - когда именно этот перевод заканчивается и когда именно появляется <div id="dest"> с теми самыми 'ами внутри

вот вам никто и не берётся помочь

-----

в общем, раз вы ситуацию не обрисовали, я вам нарисую отдельную кнопку, которая и запустит код назначения
а вы уж там сами думайте - как вам эту смешную кнопку убрать

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
function codeDelSpan (ev)
{
var e = window.event || ev, obj = e.target || e.srcElement;
if (obj.tagName != 'SPAN') return;
obj.parentNode.removeChild (obj);  
}
</script>
 
<div id="dest">
<span>mine</span>..<span>my</span> <span>job</span>..<span>work</span>
</div>
 
<p><input type="button"
          value="Ðàçðåøèòü óäàëåíèå"
          onclick="document.getElementById ('dest').onclick = codeDelSpan">

@EgorKluch · 18.12.2012, 05:41

JavaScript
1
2
3
4
5
6
7
8
$('#dest span').click(function() {
    var spans = $('#dest span');
    var length = spans.length;
    for (var i = 0; i < spans.length; i++) {
        if (spans[i] !== this)
            $(spans[i]).remove();
    }
});

@kalabuni · 18.12.2012, 05:48

о как!

я ваше задание походу не понял и нарисовал вам скрипт, удаляющий , по которому кликнули
а ведь вам, наоборот, именно его надо оставить, а остальные удалить
переделываю:

JavaScript
1
2
3
4
5
6
7
8
function codeDelSpan (ev)
{
var e = window.event || ev, obj = e.target || e.srcElement;
if (obj.tagName != 'SPAN') return;
var prn = obj.parentNode, colSpan = prn.getElementsByTagName ('SPAN');
for (var j = colSpan.length; j >= 0; j--)
   if (colSpan [j] != obj) prn.removeChild (colSpan [j]); 
}

@newJS · 18.12.2012, 07:28

Сообщение от kalabuni

о как!

кажется опять не так
нужно удалять не все спаны подряд, а только дубликаты переводов к тому слову по которому щелкнули, я так понял и если я не ошибаюсь, то все намного сложней, ведь надо удалить дубли перевода только относящиеся к слову по которому щелкнули, одинаковых слов может быть несколько в строке, а грести все под одну гребенку нельзя

Сообщение от svtbox

Например, если кликнув по my, то span в котором mine чтобы с innerHTML удалился и если кликнув по job то work удалился. Для некоторых слов есть много вариантов перевода

но это справедливо только если я правильно понял задачу

@EgorKluch · 18.12.2012, 07:31

Да, я тоже не совсем то написал, кажется.

svtbox, опишите подробнее что требуется.

@svtbox · 18.12.2012, 10:26 **[ТС]**

В первом посте все описано. То что я потом добавил через два часа это уже на крайняк, если б никто не знал как первоначальную задачу выполнить. Но вообще нужно удалять соседние span 'ы, которые отделены горизонтальным двоеточием от того, по которому кликнули. Блок с id="dest" на странице существует всегда, но по умолчанию пустой, в него выводится innerHTML. Поле оригинала это textarea onkeyup="translate(..)" т.е. когда закончили вводить в него какое то слово скрипт переводчика находит его в своей базе и выводит варианты перевода в отдельных span 'ах. Возьмем другой пример: "моя земля"
В поле перевода получим:

HTML5
1
<span>mine</span>..<span>my</span> <span>earth</span>..<span>ground</span>..<span>land</span>

Еще раз задача: когда кликнув по спану например land то соотвественно earth и ground чтобы удалились, ибо они отделены от land горизонтальным двоеточием, или кликнув по earth чтобы ground и land удалились. Но mine и my понятно пока не удаляются, ибо они отделены пробелом от earth..ground..land. Потом например если кликнув по my то mine удалился и осталось:

HTML5
1
<span>my</span> <span>land</span>

Спасибо за первые попытки, пока ни один с предложенных скриптов не работает

@kalabuni · 18.12.2012, 10:48

Сообщение от svtbox

пока ни один с предложенных скриптов не работает

ну здесь же не ясновидящие собрались, чтобы догадаться - в каком вашем ухе стрельнуло

"правильно задать вопрос - половина ответа"(с) пророк Мохаммед

в общем, изъяснились бы сразу - получили бы сразу ответ
а так - ждите
мей би, кто и посчитает достойным себя общаться с таким как вы

@svtbox · 18.12.2012, 10:53 **[ТС]**

Ну на личности переходить не нужно, я ведь тоже не ясновидящий, не знаю что сразу нужно было уточнить. К стати ваш код как раз работает, тот первый который удаляет span по которому кликнули. А все остальное ясно описано в первом посте. Удачи!

@EgorKluch · 18.12.2012, 13:07

Для работы кода необходимо подключить jQuery

HTML5
1
2
3
<div id="dest">
    <span>mine</span>..<span>my</span> <span>job</span>..<span>work</span>..<span>rabota</span>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('#dest span').click(function() {
    var entities = $('#dest').contents();
    var index = 0;
    var i,j;
    for ( i = 0; i < entities.length; i++ ){
        if ( entities[i] == this ){
            j = i-1;
            while ( j > 0 && ($(entities[j]).is('span') || $(entities[j]).text() == '..') ){
                $(entities[j]).remove();
                j--;
            }
            j = i+1;
            while ( j < entities.length && ($(entities[j]).is('span') || $(entities[j]).text() == '..') ){
                $(entities[j]).remove();
                j++;
            }
        }
    }
});

@svtbox · 18.12.2012, 13:21 **[ТС]**

Спасибо! Но к сожалению не работает, jquery подключил. Я не знаток джава но мне почему то кажется что так просто получить спаны через #dest span не получится, они ведь через innerHTML выводятся (хотя если тупо вписать спаны внутрь блока id="dest" тоже не удаляет)

@EgorKluch · 18.12.2012, 13:28

Еще раз. Вот этот код рабочий:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="dest">
    <span>mine</span>..<span>my</span> <span>job</span>..<span>work</span>..<span>rabota</span>
</div>
 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
var entities = $('#dest').contents();
$('#dest span').click(function() {
    var entities = $('#dest').contents();
    var index = 0;
    var i,j;
    for ( i = 0; i < entities.length; i++ ){
        if ( entities[i] == this ){
            j = i-1;
            while ( j > 0 && ($(entities[j]).is('span') || $(entities[j]).text() == '..') ){
                $(entities[j]).remove();
                j--;
            }
            j = i+1;
            while ( j < entities.length && ($(entities[j]).is('span') || $(entities[j]).text() == '..') ){
                $(entities[j]).remove();
                j++;
            }
        }
    }
});
</script>

Попробуйте заменить $('#dest span').click(function(){... на $('#dest span').live('click', fucntion(){...
Если работать не будет, вероятно вы опять чего-то недосказали.

@svtbox · 18.12.2012, 13:44 **[ТС]**

Да, теперь работает, но если кликнуть по work или job тогда все норм, и если по mine тоже норм, а вот если по my, тогда просто двоеточие перед ним удаляется и остается minemy

@EgorKluch · 18.12.2012, 13:49

Странно, у меня работает и в случае, когда на my нажимаю...

@svtbox · 18.12.2012, 14:07 **[ТС]**

Насколько вижу это для любого первого слова с последним вариантом его перевода такое происходит

Добавлено через 12 минут
Может это как то зарыто в while ( j > 0 &&. Если пишу например j > 1 тогда с my вообще ничего не происходит а если

HTML5
1
2
j = i+1;
  while ( j > entities.length

тогда для любого слова последний вариант не удаляется

@EgorKluch · 18.12.2012, 14:09

Да, вы правы. У меня, сейчас проверил, работает по чистой случайности..
while ( j >= 0

@svtbox · 18.12.2012, 14:12 **[ТС]**

Вот! Супер, теперь все пляшет! Спасибо большое!

@newJS · 18.12.2012, 20:22

для тех кто не любит библиотеки

HTML5
1
2
3
<div style="font-size: 25px; text-align:center;" onclick="spanClick(event);">next1 <span>mine</span>..<span>my</span>..<span>two</span> none <span>job</span>..<span>work</span>..<span>one</span> none22 <span>job</span>..<span>work</span>..<span>one</span> next2</div>
 
<div style="font-size: 25px; text-align:center;" onclick="spanClick(event);"><span>mine</span>..<span>my</span>..<span>two</span> none <span>job</span>..<span>work</span>..<span>one</span> none22 <span>job</span>..<span>work</span>..<span>one</span></div>

CSS
1
div span {color:navy;font-weight:900;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function spanClick(ev){
var m, k, re, s1, s2, s3, s4, n1, n2;
ev=ev.target?ev.target:ev.srcElement;
s1='<span>';
s2='</span>';
s3=s1+ev.innerHTML+s2;//получить слово по которому кликнули
s4=ev.parentNode.innerHTML;//всё в диве
m=m1=ev.parentNode.getElementsByTagName("span");//все теги в диве
k=0;
re="";
//ищем элемент по которому щёлкнули, попутно генерим регулярку, при наличии одинаковых подстрок этой регуляркой заведомо найдём подстроку по которой щёлкнули, а не первый попавшийся дубль
while(m[k]!==ev){
k++;
re+=s1+'.*?'+s2+'.*?';
if(!m[k]){return;}};//щелкнули не по слову завёрнутому в нужный тег
re=new RegExp('(.*?'+re+')'+s3+'(.*)', 'i');//доводим регулярку до ума
m=re.exec(s4);
n1=m[1].lastIndexOf(' ');//до первого пробела перед кликом
n2=m[2].indexOf(' ');//до первого пробела после клика
n1=n1<0?0:n1+1;//первый индекс
n2=n2<0?m[2].length:n2;//второй индекс
s4=m[1].slice(0, n1)+s3+m[2].slice(n2);//отсекаем всё ненужное
ev.parentNode.innerHTML=s4;
 
 };

А те кто любит, попробуйте кликать между слов, пробел, точки, а также если слово не переведенное, без спана и когда будет не по два слова, а больше, пустой див тоже кликается, не повиснут ли циклы на всем этом. Мало ли что там сгенерится

@EgorKluch · 18.12.2012, 21:33

newJS, событие навешиваю на span только, вы о чем, о каких дивах и пробелах?

@newJS · 19.12.2012, 07:07

о разных подходах, когда начинал писать не знал как див загружается

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@EgorKluch 9 / 7 / 5 Регистрация: 18.12.2012 Сообщений: 50
	18.12.2012, 07:31
	Да, я тоже не совсем то написал, кажется. svtbox, опишите подробнее что требуется. 0

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68
	18.12.2012, 10:53 [ТС]
	Ну на личности переходить не нужно, я ведь тоже не ясновидящий, не знаю что сразу нужно было уточнить. К стати ваш код как раз работает, тот первый который удаляет span по которому кликнули. А все остальное ясно описано в первом посте. Удачи! 0

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68
	18.12.2012, 13:21 [ТС]
	Спасибо! Но к сожалению не работает, jquery подключил. Я не знаток джава но мне почему то кажется что так просто получить спаны через #dest span не получится, они ведь через innerHTML выводятся (хотя если тупо вписать спаны внутрь блока id="dest" тоже не удаляет) 0

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68
	18.12.2012, 13:44 [ТС]
	Да, теперь работает, но если кликнуть по work или job тогда все норм, и если по mine тоже норм, а вот если по my, тогда просто двоеточие перед ним удаляется и остается minemy 0

@EgorKluch 9 / 7 / 5 Регистрация: 18.12.2012 Сообщений: 50
	18.12.2012, 13:49
	Странно, у меня работает и в случае, когда на my нажимаю... 0

@EgorKluch 9 / 7 / 5 Регистрация: 18.12.2012 Сообщений: 50
	18.12.2012, 14:09
	Да, вы правы. У меня, сейчас проверил, работает по чистой случайности.. while ( j >= 0 0

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68
	18.12.2012, 14:12 [ТС]
	Вот! Супер, теперь все пляшет! Спасибо большое! 0

@EgorKluch 9 / 7 / 5 Регистрация: 18.12.2012 Сообщений: 50
	18.12.2012, 21:33
	newJS, событие навешиваю на span только, вы о чем, о каких дивах и пробелах? 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	19.12.2012, 07:07
	о разных подходах, когда начинал писать не знал как див загружается 0