Удаление элемента в "жидком" листе.

[melky]

Для начала обьясню, под чем я понимаю "текучий" (или "жидкий") лист.
( лист от слова List )

это такой объект, имеющий свои свойства и методы, как все объекты, но вдобавок и пронумерованные свойства и свойство length, равное длине пронумерованных элементов.

представить его можно как-то так :

var fluid = {
     myProp : "okay",
     myMethod : function(){ alert('myMethod!') },

     "0" : "null",
     "1" : "one",
     "2" : "two",
     "3" : "three",
     
     length : 4
};

Отличается он от массива тем, что при удалении пронумерованного свойства его длина автоматически уменьшается на 1, а пронумерованные элементы, идущие за удаленным элементом, уменьшают свои индексы на 1.

delete fluid["1"];

/*
fluid is
 {
     myProp : "okay",
     myMethod : function(){ alert('myMethod!') },

     "0" : "null",
     "1" : "two",
     "2" : "three",
     
     length : 3
};
*/

delete fluid["1"];

/*
fluid is
 {
     myProp : "okay",
     myMethod : function(){ alert('myMethod!') },

     "0" : "null",
     "1" : "three",
     
     length : 2
};
*/

Проблема состоит в том, чтобы запоминать индексы определённых пронумерованных элементов и удалять их при необходимости.

Конечно, это было бы легко, если бы они не смещались вверх. Так вот, мне нужен алгоритм, при котором можно будет удалить такой-то пронумерованный элемент.

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

Вот запускаемый пример

Пример: не успевает. откройте на локале

<div>Hello World !</div>

<script>
var dummy = document.querySelector('div');
var stylesheet = document.head.appendChild(document.createElement('style')).sheet;
var rules = stylesheet.cssRules; // <- тот самый жидкий массив

// вставляем правила, запоминаем индексы...
var first = stylesheet.insertRule("div { border:1px red solid; }", rules.length);
var second = stylesheet.insertRule("div { padding:10px; }", rules.length);
var thirst = stylesheet.insertRule("div { color:green; }", rules.length);

// отображаем результаты в консоли
console.dir(rules);

 // запомненные индексы
 console.log(first, second, thirst);

// пережидаем ленивую отрисовку.
setTimeout(function(){

     // убираем первое правило.
     stylesheet.deleteRule(first);
     
     // и смотрим на правила
     console.dir(rules);

}, 3000);
</script>

Вот-с. Итак, как удалить правило-то ?

[Pavel M.]

не совсем понятно, вы про объект таблицы стилей или про то как сделать свой объект с аналогичной функциональностью?

[Octane]

delete fluid["1"];

может просто splice'ом удалять?

[melky]

я про объект таблицы стилей.

..

удалять сплайсом ?

[dmitriymar]

melky,
а если структуру поменять? вместо свойств просто массив и методы работающие с массивом-добавление,удаление с массива прочие операции...

[monolithed]

удалять сплайсом ?

только если массив

[Octane]

Да и с обычным объектом прокатит, индексы сдвинет, остальные свойства не тронет, единственное, что свойство length обязательно должно присутствовать, но если добавлять, как в jQuery, с помощью [].put.call(obj, el), то проблем не будет.

[melky]

Octane, вероятно, я плохо объяснил, в чём проблема, Вы меня не поняли.

melky,
а если структуру поменять? вместо свойств просто массив и методы работающие с массивом-добавление,удаление с массива прочие операции...

как правила в таблице превратить в массив и работать с ними в таком виде ?

вся проблема целиком и полностью относится к правилам стилей.

я подумал, как сюда можно замешать массивы ... и тут я вспомнил отличный метод у массива ...

var fluid = [  1,2, { 'obj?!' : 'suddenly!' } ,4,5,6,7,8, { 'obj is here' : 'again' } ,10  ];

var obj = { 'this is' : 'my sample obj' };

fluid.push(obj);

// перемешиваем.
var i = fluid.length, b, c;
do { b = Math.floor(Math.random()*--i); c = fluid[b]; fluid[b] = fluid[i]; fluid[i] = c; } while(i);

console.log( fluid );

// и ищем индекс obj в массиве fluid.. EASE WAY
*!*
var index = fluid.indexOf( obj );
*/!*

console.log( index, fluid[ index ]  );

как я мог забыть про него ??

попробую теперь на правилах :

<div>Hello World !</div>

<script>
var dummy = document.querySelector('div'),
     stylesheet = document.head.appendChild(document.createElement('style')).sheet,
     rules = stylesheet.cssRules;

// намешаем правил
stylesheet.insertRule("div { margin:10px; }", rules.length);
stylesheet.insertRule("div { font-size:2em; }", rules.length);

// вернёт индекс добавленного правила
var first = stylesheet.insertRule("div { border:10px red solid; }", rules.length);

stylesheet.insertRule("body { padding:90px; }", rules.length);
stylesheet.insertRule("html { pading:10px; }", rules.length);

// и тут тоже индекс.
var second = stylesheet.insertRule("div { color:green; }", rules.length);


// превращаем индексы в сами правила
first = rules[ first ];
second = rules[ second ];

// удалим пару правил. тут я делаю это наугад, чтобы сместились индексы запомненных правил
stylesheet.deleteRule(  3  );
stylesheet.deleteRule(  0  );

// а теперь я их точно удаляю; таймаут для наглядности
setTimeout(function(){

     var first_index = [].indexOf.call( rules, first );
     stylesheet.deleteRule(first_index);

     // т.к. они смещаются вверх, то индекс надо определять прямо перед удалением.

     var second_index = [].indexOf.call( rules, second );
     stylesheet.deleteRule(second_index);

}, 1000);
</script>

Отлично! Problem solved.
Проверил в IE 9, FF 10, O 11.61, CH 17.0.963.83m

как всегда, выручает заимствование методов.

PS. работа в IE<=9 (<10) не нужна, т.к. они не поддерживают переходы и анимации на CSS.
PSS. само собой, такого говнокода у меня не бывает. Всё это было написано супер подробно и супер развёрнуто - чтобы хорошо читалось.