Remove javascript

I'm making the following code, but the "Erase" part doesn't work.

<form method="post" name="insert" action="enctype="multipart/form-data">
    <ul>
        <li><input type="text" placeholder="Title" name="title" style="width:400px;weight:20px;margin-bottom:10px;"value="<?phpecho$_POST["title" ];?>">>>
        <li>Upload Image<br><input type="file" name="top_img"></li>
        <li><input type="text" placeholder="Intro" style="width:400px;weight:20px;margin-bottom:10px;"value="<?phpecho$_POST["intro"];?>">>>>
        <li><input type="text"placeholder="fill in tags with punctuation marks (,)" name="tags" style="width:400px;height:20px;margin-bottom:10px;"value="<?phpecho$_POST["tags"];>>>
        <ulid="ul">
            <lic class="button"><aid="title" style="margin:10px;">Title</a></li>
            <lic class="button">aid="img" style="margin:10px;">Image</a><li>;
            <lic class="button"><aid="text" style="margin:10px;">text</a></li>;
        </ul>
        <li><input type="submit" value="send">/li>
    </ul>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>

    var num = 1;

    $(function () {
        $("#title").click(function () {
            $("#ul").append('<li id="' + String(num) + '"><input name="text_title' + String(num) + '" type="text" placeholder="タイトル" style="width:400px;height:20px;margin-bottom:10px;"></li><li id="' + String(num) + '"><a id="' + String(num) + '" style="margin:10px;">消す</a></li>');
            num++;
        });
        $("#img").click(function () {
            , $ Apple (" # Bulk " ). d (' Google ; and ; and & adult ; id id = " '   ++    ) (where num +   ' " City type=hidden inputVar " text "   name, will potentially replace Lehman's  , a ‘ = " URL of the image "   Style = lt ; / and and gt ; and " width : 502px ; padding : 0px ; heighthalign iconv ship-in-bottle padding : 0px ; margin : 0px ; " ' )
            num++;
        });
        $("#text").click(function () {
            $("#ul").append('<li id="' + String(num) + '"><textarea name="text_html' + String(num) + '" placeholder="内容" style="width:400px;height:300px;"></textarea></li>');
            num++;
        });

        $("#" + String(num)).click(function () {
            $("#" + String(num)).remove();
            num--;

        });
    });
</script>

Please let me know if you know more.Thank you for your cooperation.

javascript

2022-09-30 17:06

1 Answers

Since there is no indentation and jQuery, let's do code molding
It's hard to see, so it might be overlooked.
First of all, the main topic

For example, this part is

$("#ul").append('<liid="'+String(num)+'>input name="text_title'+String(num)+'"type="text"placeholder="Title" style="width:400px;height:20px;margin-bott;10<lom>"

Do I know if I do this?

$("#ul").append(
    $("<li>").attr("id", String(num)) .append(//← numeric ID, 1st
        $("<input>").attr({
            "name": 'text_title' + String(num),
            "type": 'test',
            "placeholder": 'Title'
        }).css({
            "width": '400px',
            "height": '20px',
            "margin-bottom": '10px'
        })
    )
) .append(
    $("<li>").attr("id", String(num)) .append(//← numeric ID, second
        $("<a>").attr("id", String(num)) .css({"margin":'10px'}).html("Delete") // ← Number ID, 3rd
    )
);

Isn't it because you make multiple elements with the same ID?
Also, I think it would be better to stop using only numerical values.
If you want to put them together and erase them, add a class or devise a selector

add
I read and corrected what I wanted to do with the current structure.
However, if I were to make it, I would not have the current number
Use the wrapper to enclose the whole thing, such as this to find and delete the parent element, as shown below.
function(e){e.parentNode;} to manipulate elements.

<li>
    <div>
        <input type="text" value="Title"/>
        <button onclick="remove_func(this)">turn off</button>
    </div>
</li>

Also, it is easy to get the current number of elements by adding a class name.
Regarding the sample listed below, if you want the number of each element,
Overall: add_li
Title: item_title
Image:item_img
Learn more:item_txt

and so on. If you selectors by class name, length will count.

varnum=1;

$(function () {
  $("#title").click(function () {
    $("#ul").append(
        $("<li>").addClass("add_li item_title item" + String(num)) .append(
            $("<input>").attr({
                "name": 'text_title' + String(num),
                "type": 'test',
                "placeholder": 'Title'
            }).css({
                "width": '400px',
                "height": '20px',
                "margin-bottom": '10px'
            })
        )
    ) .append(
        $("<li>").addClass("add_li item" + String(num)) .append(
            $("<a>").addClass("rm_btn"+String(num)) .attr("onclick", "remove_item("+String(num)+")).css({"margin": '10px'}).html(" Erase")
        )
    );
    num=($.add_li").length/2)+1;
  });
  $("#img").click(function () {
    $("#ul").append(
        $("<li>").addClass("add_li item_img item" + String(num)) .append(
            $("<input>").attr({
                "name" : 'img' + String(num),
                "type": 'test',
                "placeholder": 'URL of image'
            }).css({
                "width": '400px',
                "height": '20px',
                "margin-bottom": '10px'
            })
        )
    ) .append(
        $("<li>").addClass("add_li item" + String(num)) .append(
            $("<a>").addClass("rm_btn"+String(num)) .attr("onclick", "remove_item("+String(num)+")).css({"margin": '10px'}).html(" Erase")
        )
    );
    num=($.add_li").length/2)+1;
  });
  $("#text").click(function () {
    $("#ul").append(
        $("<li>").addClass("add_li item_txt item" + String(num)) .append(
            $("<input>").attr({
                "name": 'text_html' + String(num),
                "type": 'test',
                "placeholder": 'Contents'
            }).css({
                "width": '400px',
                "height": '300px'
            })
        )
    ) .append(
        $("<li>").addClass("add_li item" + String(num)) .append(
            $("<a>").addClass("rm_btn"+String(num)) .attr("onclick", "remove_item("+String(num)+")).css({"margin": '10px'}).html(" Erase")
        )
    );
    num=($.add_li").length/2)+1;
  });
});

function remove_item(target){
  // Keep the current number of additional lists
  varwork=num;
  // Delete element
  $(".item"+target).remove();
  // Organize class names attached
  for(varn=target;n<work;n++){
    var next=(n+1);
    $(".rm_btn"+next).removeClass("rm_btn"+next).addClass("rm_btn"+n).attr("onclick", "remove_item("+n+")";
    $(".item"+next).removeClass("item"+next).addClass("item"+n);
  }
  num=($.add_li").length/2)+1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="insert" action="enctype="multipart/form-data">
    <ul>
        <li><input type="text" placeholder="Title" name="title" style="width:400px;height:20px;margin-bottom:10px;"value="Title">/li>
        <li>Upload Image<br><input type="file" name="top_img"></li>
        <li><input type="text" placeholder="Intro" style="width:400px;height:20px;margin-bottom:10px;"value="Intro">/li>
        <li><input type="text"placeholder="fill in tags with punctuation marks (,)" name="tags" style="width:400px;height:20px;margin-bottom:10px;"value="tag">/li>
        <ulid="ul">
            <lic class="button"><aid="title" style="margin:10px;">Title</a></li>
            <lic class="button">aid="img" style="margin:10px;">Image</a><li>;
            <lic class="button"><aid="text" style="margin:10px;">text</a></li>;
        </ul>
        <li><input type="submit" value="send">/li>
    </ul>
</form>

2022-09-30 17:06

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656