Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   как удалить form'у (https://javascript.ru/forum/css-html/44992-kak-udalit-form%27u.html)

Belai 10.02.2014 13:46

Так и делал. А на форме написал:

<input type='button' value="DELETE" onClick="button.onClick()";/>


Реакции нет. =(

danik.js 10.02.2014 14:03

Цитата:

Сообщение от Belai
А на форме написал

Дык тебе только одна кнопка нужна? Покажи весь код (и HTML и JS)

Belai 10.02.2014 14:34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<script language="javascript">


function CreateFormElement(){
  var createtime = new Date().getTime();   
  var Form = document.getElementById('fms')
  var Inner = document.createElement('input');
  Inner.type = 'text';
  Inner.value = '';
  Inner.name = 'size___' + createtime;
  Form.appendChild(Inner);
  var Br = document.createElement('br');
  Form.appendChild(Br);
}

                button.onClick = function () {
                              var field=this.parentNode;
                              field.parentNode.removeChild(field);
                }

               

--></script>

<body>
<form  id="fms" method="get" action=""><br />
<input type="button" value="добавить поля формы" onClick="CreateFormElement()">
<input type="button" value="Delete" onClick="button.onClick()" />
</form>
</body>
</html>


На конопку DELETE нажимаю, ничего не происходит.

Да, можно одну кнопку. А можно и кнопку, которая будет появляться вместе с полем и по нажатию на нее, удалялось поле.

danik.js 10.02.2014 14:57

Опять это уродство. А что, мой код забраковал? Чем плох?
Цитата:

Сообщение от Belai
XHTML 1.0 Transitional

но при этом
Цитата:

Сообщение от Belai
<input type="button" value="добавить поля формы" onClick="CreateFormElement()">

Раз зарекся доктайпом писать XHTML - будь добр пиши XHTML. То же касается атрибута type скрипта. Но я бы просто заменил доктайп на <!DOCTYPE html> и похеру на все.

Belai 10.02.2014 15:09

Почему забраковал!? Вот же он:

button.onClick = function () {
	                              var field=this.parentNode;
	                              field.parentNode.removeChild(field);
	                }


А потом добавил кнопку:
<input type="button" value="Delete" onClick="button.onClick()" />

и мое воспаленное воображение думало что удалится любое поле, которое я только захочу. ))))))

А что касается второго вопроса. Я даже не понимаю о чем речь =D


Можно ваш вариант как должно быть?! =)

danik.js 10.02.2014 15:39

Цитата:

Сообщение от Belai
А что касается второго вопроса. Я даже не понимаю о чем речь =D

У тебя доктайп от XHTML документа. То есть твой HTML код должен быть совместим с XML-синтаксисом:
не <input> , а <input />.
Также этот доктайп требует обязательный атрибут type у тега <script>.
А вот атрибут language возможно даже запрещен. И вобще, один хер документ будет распарсен HTML-парсером, а не XML, так что пофиг.

Ну все это по сути мелочи. Если бы браузеры всерьез воспринимали, то ща с бы неработало 99% интернет-страниц )))
Ибо веб-девелоперы в своем большинстве плюют на/не знают все эти "стандарты".

<!DOCTYPE html>
<head>
    <title>Untitled Document</title>
</head>
<body>
    <form id="fms">
        <script>
        (function(){
            var fields = [];
            window.addField = function(){
                var form = document.getElementById('fms');
                var field = document.createElement('div');
                var inputs = ['size', 'price'];
                for (var i = 0; i < inputs.length; i++) {
                    var input = document.createElement('input');
                    input.name = inputs[i] + '[]';
                    field.appendChild(input);
                }
                form.appendChild(field); // добавляем на страницу
                fields.push(field); // добавляем в наш массивчик
            }
            window.removeField = function() {
                var field = fields.pop();
                if (!field)
                    return alert('Нечего удалять');
                field.parentNode.removeChild(field); // удаляем из страницы
            }
        })();
        </script>
        <input type="button" value="добавить поля формы" onclick="addField()">
        <input type="button" value="удалить поля" onclick="removeField()">
    </form>
</body>

danik.js 10.02.2014 15:47

Или даже так:
<!DOCTYPE html>
<head>
    <title>Untitled Document</title>
</head>
<body>
    <form id="fms">
        <input type="button" name="add" value="добавить поля формы">
        <input type="button" name="remove" value="удалить поля">
        <script>
        (function(){
            var form = document.getElementById('fms');
            var fields = [];
            var buttons = {
                add: form.add,
                remove: form.remove
            };
            buttons.add.onclick = addField;
            buttons.remove.onclick = removeField;
            updateButtonsState();
            function updateButtonsState() {
                buttons.remove.disabled = fields.length <= 1;
            }
            function addField(){
                var field = document.createElement('div');
                var inputs = ['size', 'price'];
                for (var i = 0; i < inputs.length; i++) {
                    var input = document.createElement('input');
                    input.name = inputs[i] + '[]';
                    field.appendChild(input);
                }
                form.appendChild(field); // добавляем на страницу
                fields.push(field); // добавляем в наш массивчик
                updateButtonsState();
            }
            function removeField() {
                var field = fields.pop();
                field.parentNode.removeChild(field); // удаляем из страницы
                updateButtonsState();
            }
        })();
        </script>
    </form>
</body>

Belai 10.02.2014 15:50

Оу, спасибо за разъяснение! Прям очень порадовало. Не ожидал =)

А удаляется только последние 2 из созданных...а если мне надо удалить поля из середины? По идее они должны быть заполнены. И как только одна из задач решена, поле удаляется, вручную )

danik.js 10.02.2014 16:00

Цитата:

Сообщение от Belai
а если мне надо удалить поля из середины?

Ну это ты уже сам. Создавай кнопку динамически внутри функции addField (вроде того, как создается инпут), вешай на нее обработчик, который был предложен выше, ну и тогда массив fields наверно не понадобится.

Belai 10.02.2014 16:15

Ок, спасибо большое! =)


Часовой пояс GMT +3, время: 17:14.