JQuery удалить только эффект первого пролета

Question

JQuery удалить только эффект первого пролета

0

Обратитесь к моему jsfiddle, мой jquery работает только для первого щелчка "X", но не второго или третьего?

2) как отключить его, когда он оставил только один вход?

<div class="main-form">
    <fieldset id="ingt">
        <legend></legend>
        <div class="formheader">
            <label style="width:170px;"></label>
            <label></label>
        </div>
        <div class="formrow">
            <span class="drag"></span>
            <input type="text" max-length="30" name="recipe[ingredient][0][amount]" />
            <input type="text" id="ingredient" size="60px" name="recipe[ingredient][0][ingredient]" />
            <span id="remove">X</span>
        </div>
        <div class="formrow">
            <span class="drag"></span>
            <input type="text" max-length="30" name="recipe[ingredient][1][amount]" />
            <input type="text" id="ingredient" size="60px" name="recipe[ingredient][1][ingredient]" />
            <span id="remove">X</span>
        </div>
        <div class="formrow">
            <span class="drag"></span>
            <input type="text" max-length="30" name="recipe[ingredient][2][amount]" />
            <input type="text" id="ingredient" size="60px" name="recipe[ingredient][2][ingredient]" />
            <span id="remove">X</span>
        </div>
        <div id="add"></div>
        <button id="addi" type="button" onclick="add_field()">Add </button>
    </fieldset>
</div>

$(function () {
    $("#remove").click(function () {
        $(this).parent().remove();
    });
});

user2982110 01 янв. 2014, в 16:56

Источник

Теги:

javascript

jquery

html

css

4 ответа

Ещё вопросы

Arun P Johny · Answer 1 · 2014-01-01T12-42-00.000Z

Идентификатор элемента должен быть уникальным, вместо этого используйте класс

<span class="remove">X</span>

тогда

$(function () {
    $(".remove").click(function () {
        $(this).parent().remove();
    });
});

Селектор ID вернет только первый элемент с указанным элементом, поэтому ваш селектор $("#remove") вернет первый элемент с remove идентификатора, чтобы обработчик кликов добавился только к этому элементу

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

$(function () {
    //if you want to make the last item in the list(in terms of position) to non removable
    $(".main-form").on('click', '.remove:not(:last)', function () {
        $(this).parent().remove();
    });
});

Демо: скрипка

или

$(function () {
    $(".main-form").on('click', '.remove', function () {
        //if you want to make the last item in the list to non removable
        if ($('.remove').length > 1) {
            $(this).parent().remove();
        }
    });
});

Демо: скрипка

фантастика ! Спасибо ! но как мне ограничить его до последнего не кликабельным?

Rob Sedgwick · Answer 2 · 2014-01-01T13-48-00.000Z

Повторяющиеся идентификаторы. (IDS должны быть уникальными)

<span id="remove">X</span>

изменить на

<span class="remove">X</span>

и изменить сценарий

$(".remove").click(

Rajaprabhu Aravindasamy · Answer 3 · 2014-01-01T13-40-00.000Z

Идентификатор должен быть unique. Таким образом, вы можете использовать класс вместо него.

Измените id='remove' на class='remove'

и попробовать,

$(function () {
$(".remove").click(function () {
      $(this).parent().remove();
    });});

Чтобы ограничить последнюю, не кликабельную, просто попробуйте,

$(function () {
$(".remove").click(function () {
      if($(".remove").length > 1){
         $(this).parent().remove();
      }
    });});

фантастика ! Спасибо ! но как мне ограничить его до последнего не кликабельным?
@ user2982110 Просто попробуйте мое обновление!

Satpal · Answer 4 · 2014-01-01T13-12-00.000Z

Идентификатор должен быть уникальным, я предлагаю вам вместо этого использовать класс

$(".remove").click(function () {
    $(this).parent().remove();
});

HTML

<span id="remove">X</span>

изменить на

<span class="remove">X</span>

Fiddle DEMO

фантастика ! Спасибо ! но как мне ограничить его до последнего не кликабельным?