Я могу создать элементы управления, но не могу их удалить. Я пытаюсь добавить ссылку, которая вызовет функцию для удаления динамически созданного элемента управления. Элемент управления и ссылка находятся рядом друг с другом. Вот сценарий Java и разметка для создания элемента управления:

<script type="text/javascript">
        $(function() { // when document has loaded

            //   <input id="File1" type="file" runat="server" size="60" />

            var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work


            $('a#add').click(function() { // when you click the add link
                $('<p><input type="file" id="' + i + '" name="' + 'dynamic:' + i + '" /> <a href="#" id="' + 're' + i + ' " onclick="removeControl("' + '\'#' + i + '\''+ '")">+</a></p>').appendTo('body'); // append (add) a new input to the document.

                // if you have the input inside a form, change body to form in the appendTo
                i++; //after the click i will be i = 3 if you click again i will be i = 4s
            });

            function removeControl(controlId) {

                $(controlId).remove();
            }


        }); </script>


   <div>
        <a href="#" id="add">Add</a>

<br />


<p><input type="file" id="1" /></p>

    </div>

Скрипт для создания ссылки для удаления элемента управления не работает. Атрибут onClick размечен неправильно, когда я использую Firebug для просмотра источника.

<a href="#" id="' + 're' + i + ' " onclick="removeControl("' + '\'#' + i + '\''+ '")">+</a>

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

Спасибо.

1
Narazana 17 Июл 2010 в 22:25

2 ответа

Лучший ответ

Если вы хотите удалить элемент из Dom, который был включен с помощью javascript, вам необходимо прикрепить обработчик событий.

$('a.remove').live('click', function() {
  // Stuff to remove
});

Рабочий раствор:

<script type="text/javascript">
    $(function() {
       
        // Init counter
        var counter = 0;
        
        // Add Elements
        $('#add').click(function() {

            counter++ // Increment counter

            var add_input = '<p><input type="file" />';
            var add_link = '<a href="#" class="remove">Remove</a>';

            // Append Elements if counter smaller 4
            if (counter <= 4) {
                $('body').append('<p>' + add_input + add_link + '</p>');
            }
            return counter;
         });

         // Remove Elements
         $('.remove').live('click', function() {
             counter--; // Decrement counter
             $(this).parent('p').remove();
         });
     });
</script>

<a href="#" id="add">Add</a>

FYI-> Всегда уменьшайте количество вставок dom до минимума.

2
Community 20 Июн 2020 в 09:12

Попробуйте изменить функцию removeControl на это:

function removeControl(driver) {
  $(driver).closest("p").remove();
}

Затем измените вызов функции в вашем якоре на это:

onclick="removeControl(this);return false;"

Должно быть хорошо ...

0
BradBrening 17 Июл 2010 в 18:40